如何从Vue Template获取数据？

我有下一个HTML：如何从Vue Template获取数据？

<div id="app"> 
    <component :is="currentView"></component> 
</div>

Vue公司代码：

var GuestMenu = Vue.extend({ 
     template: ` 
        <input v-model="username"> 
      `}); 
Vue.component('guestmenu', GuestMenu); 

var App = new Vue ({ 
    el: '#app', 
    // template: '<usermenu></usermenu>', 
    data: 
    { 
     currentView: "guestmenu", 
     username: "" 
    } 
    })

我需要从v-model得到username。所有的例子展示了如何得到它的直接，但我的数据放置在模板中的问题...

http://jsfiddle.net/u9L569ku/

来源

2016-01-10 Dmitry Bubnenkov

当你说你想从V模型的用户名，你已经这样做了。由于v-model指令，数据对象用户名有两种绑定方式。 – notANerdDev

你确定吗？你能告诉我如何输出它的价值...... –

'this.username'会给它的价值。 – notANerdDev

我相信这是你想要达到的目标。基本上，在你的例子中有一个亲子关系，但沟通不正确。您的组件中的用户名未绑定到Vue实例的数据中的用户名。

jsfiddle

HTML

<div id="app"> 
    <component :username.sync="username" :is="currentView"> </component> 
    {{username}} 
</div>

的JavaScript

var GuestMenu = Vue.extend({ 
    props : ['username'], 
    template: `<input v-model="username">` 
}); 

Vue.component('guestmenu', GuestMenu); 

var App = new Vue ({ 
    el: '#app', 
    data: { 
     currentView: "guestmenu", 
     username: "" 
    } 
    })

来源

2016-01-10 15:54:06 zxzak

你也可以看看这个问题。这是一个有点相关http://stackoverflow.com/questions/34697989/is-its-good-practice-to-declaration-new-component-in-template –

如何从Vue Template获取数据？

回答

相关问题