如何给vue异步组件绑定事件

2016-06-17 11:33:52vue.js问题

vue中有异步组件功能https://vuejs.org.cn/guide/components.html#异步组件
但是异步组件里面怎么绑定事件呢?换句话说,怎么才能像正常组件那样双向绑定数据?

Vue.component('async-example', function (resolve, reject) {
  setTimeout(function () {
    resolve({
      template: '<div @click="show">I am async!</div><input type="text" v-model="val"/>'
    })
  }, 1000)
})

其中的click,model都是无效的,该怎么操作才能使用呢?

网友回答:

  • leftstick leftstick 2016-6-17 11:40 回复:
    已被采纳

为什么不行呢?

补充:

增加绑定数据部分

Vue.component('async-example', function (resolve, reject) {
  setTimeout(function () {
    resolve({
      template: '<div @click="show">I am async!</div><input type="text" v-model="val"/>',
      data: function(){
          return {
              val: 'Fucking it'
          };
      },
      methods: {
          show: function(){
              alert('show show!');
          }
      }
    })
  }, 1000)
})

这样不行么?

  • jsoncode jsoncode 2016-6-17 11:48 回复:leftstick
    那个数据在哪里绑定?data?data绑定不上

  • jsoncode jsoncode 2016-6-17 12:57 回复:leftstick
    果然很粗暴?

  • 道哥什么都不知道 道哥什么都不知道 2018-5-7 11:08 回复:leftstick

    回答很完美,但有点瑕疵,template里的</div>写在末尾就好了。