美文网首页
vue父子组件通信问题

vue父子组件通信问题

作者: fisher_zh | 来源:发表于2017-07-08 17:58 被阅读35次

    在使用vue的过程中,如果需要进行父子组件间的通信,通过查阅官方文档
    我们可以了解到只需要在子组件要显式地用 props选项声明它期待获得的数据,同时在其使用过程中传入相应的数据即可,例如:

    Vue.component('child', {
      // 声明 props
      props: ['message'],
      // 就像 data 一样,prop 可以用在模板内
      // 同样也可以在 vm 实例中像“this.message”这样使用
      template: '<span>{{ message }}</span>'
    })
    
    <child message="hello!"></child>
    

    当然,这只是一个简单的例子,在实际的使用过程中,我们还可以在子组件中声明传入数据的类型和默认值,这些不展开讲解,查阅官方文档均可以找到满意的答案。

    在vue中,prop 是单向绑定的:当父组件的属性变化时,将传导给子组件,但是不会反过来。这是为了防止子组件无意修改了父组件的状态——这会让应用的数据流难以理解。所以如果我们在子组件中想要传递给父组件某些信息的话,我们就需要用到另一种方法——vm.$emit

    Vue.component('child', {
      // 声明 props
      props: ['message'],
      // 就像 data 一样,prop 可以用在模板内
      // 同样也可以在 vm 实例中像“this.message”这样使用
      template: '<span>{{ message }}</span>',
      methods: {
        triggerEvent() {
          // 传入事件名和需要传递的参数
          this.$emit('eventName', args)
        }
      }
    })
    
    <child @change="changeEvent" message="hello!"></child>
    <!-- 在绑定事件的过程中,changeEvent方法并不需要传入参数,在之后使用的时候传入参数即可 -->
    

    以上均为较常见的方法,在官方的文档中也有比较详尽的介绍。但是在之前的使用过程中,我需要在父组件中触发子组件的某个方法,这时候需要怎么做呢?在查阅文档的过程中并没有找到行之有效的办法,之后通过查阅资料发现我们可以通ref为子组件指定一个索引,之后通过索引获取子组件的事件,例:

    <child ref="child" @change="changeEvent" message="hello!"></child>
    
    this.$refs.child.childEventName
    // 通过这种方式可以获取到子组件的方法
    

    (end)

    相关文章

      网友评论

          本文标题:vue父子组件通信问题

          本文链接:https://www.haomeiwen.com/subject/lkrjhxtx.html