vue中详细解释父子组件的通信原理

父组件:

<template>
  <div class="parent">
    <div>我是父组件,给子组件传值(传:我是父组件)----{{msg2}}</div>
    <!--在子组件上v-on来监听事件click-msg,一旦触发$.emit('事件名称'),则调用exportMsg方法,这里不要加上括号,写成函数执行的形式-->
    <transmit-child :child-msg="msg" @click-msg="exportMsg"></transmit-child>
  </div>
</template>

<script>
import child from '@/components/child'
export default {
  name: 'parent',
  data () {
    return {
      arr: [1, 2, 3, 4],
      msg: '我是父组件',
      msg2: ''
    }
  },
  components: {
    'transmit-child': child
  },
  methods: {
    exportMsg (childValue) {
      console.log('fu')
      this.msg2 = childValue
    }
  }
}
</script>

子组件:

<template>
  <div class="child">
    <div>我是子组件</div>
    <div>{{childMsg}}</div>
    <button @click="transmit">通过事件向父组件传递消息</button>
  </div>
</template>

<script>
export default {
  name: 'child',
  data () {
    return {
      msg: '我是子组件'
    }
  },
  //  props是组件的一个单独选项,不能写在data中
  props: ['childMsg'],
  methods: {
    transmit () {
      console.log('zi')
      //  事件名称('click-msg')和需要传递给父组件的值(msg)
      this.$emit('click-msg', this.msg)
    }
  }
}
</script>
  • 父组件传递数据给子组件。是通过子组件设置props选项中自定义属性来接收来自父组件的数据。父组件中子组件的地方使用v-bind:自定义属性(该属性必须为子组件的props的值)。父组件传值则为v-bind:自定义属性(该属性必须为子组件的props的值)=‘父组件需要传的值’。要在子组件中展示父组件传过来的值,就像访问data属性中的值即可,可以用插值表达式。
    另外,props注意点:
    1.在js中用驼峰书写
    2.在HTML中用连字符书写

    3.props属性只读,不可修改。
    4.受父组件影响,当父组件相应的数据变化时,子组件属性同样变化。
<div id="app">
    this is a parent component
    <child-component :parent-msg="msg"></child-component>
</div>

<template id="child">
    <div>
        <button >click to show</button>
    </div>
</template>
<script src="vue.js"></script>
<script>
        new Vue({
            el:'#app',
            data: {
                msg: 'this is parent component'
            },
            components:{
                childComponent: {
                    props:['parentMsg'],
                    template: '#child'
                }
            }
        })

</script>
  • 子组件通过事件触发向父组件传递消息。截取子组件methods方法代码如下:
 methods: {
    transmit () {
      console.log('zi')
      //  事件名称'click-msg'和需要传递给父组件的值msg,这里可以传多个值,相应的父组件中的方法中,形参要写多个。
      this.$emit('click-msg', this.msg, ...)
    }
  }

点击子组件,执行transmit方法,进而执行了this.$emit('clickMsg', this.msg)方法。第一个参数为事件名称,第二个参数为子组件中需要传递给父组件的值。在父组件中子组件的地方使用v-on:clickMsg="exportMsg"来监听子组件的事件触发。一旦触发,则会执行父组件中的exportMsg方法,方法代码如下:

  methods: {
    exportMsg (childValue) {
      console.log('fu')
      this.msg2 = childValue
    }
  }

this.$emit('clickMsg', this.msg)中的this.msg会传递给childValue进而达到传值的目的。
下面有注意点,(修改并记于2019.1.16 )
1.不同于组件和 prop,事件名不会被用作一个 JavaScript 变量名或属性名,所以就没有理由使用 camelCase 或 PascalCase 了。并且 v-on 事件监听器在 DOM 模板中会被自动转换为全小写 (因为 HTML 是大小写不敏感的,浏览器会把所有大写字符解释为小写字符),所以 v-on:myEvent 将会变成 v-on:myevent——导致 myEvent 不可能被监听到。
因此,推荐始终使用 kebab-case 的事件名。

2.第二点谈谈子组件到底是如何触发自定义事件,然后传数据给父组件的?
基于事件绑定,在子组件上用v-on绑定自定义事件,然后通过某些“行为”,比如,用户点击了子组件,调用了组件中的某个方法,而该方法中调用了vm.$emit()方法,这便触发了自定义事件,并且在该方法中传递了数据,便传给了父组件。

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值