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: ""
    }
  })

我需要从username获取v-model。所有示例都显示如何直接获取它的问题，但我的数据放在模板中......

http://jsfiddle.net/u9L569ku/

Answer 1

我相信这就是你想要实现的目标。基本上，您的示例中存在父子关系，但未正确设置通信。组件中的用户名未绑定到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模板获取数据？

1 个答案: