如何从 Vue 模板中获取数据？

Question

我有下一个HTML:

<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/

Answer 1

我相信这就是你想要实现的。基本上，您的示例中存在 parent-child 关系，但通信设置不正确。您组件中的 用户名 未绑定到 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: ""
    }
  })

如何从 Vue 模板中获取数据？

How get data from from Vue Template?

vue.js