vue2.0组件通信

组件通信分为父组件向子组件传递数据，子组件向父组件传递数据

一：父组件向子组件传递数据

通过props来实现

父组件代码：

<template>
  <div id="father">
    <child :child-data="msg"></child>//这里必须用'-'来代替驼峰
  </div>
</template>
<script>
import child from './child.vue'
  export default ({
    data(){
      return{
        msg:'hello child'
      }
    },
    components:{
    child
    }
  })
</script>

子组件通过props来获取父组件的数据：

方法1：

<template>
  <div id="child">
    {{childData}}
  </div>
</template>
<script>
  export default ({
    props:['childData'],
    data(){
      return{

      }
    }
  })
</script>

方法2：

<template>
  <div id="child">
    {{childData}}
  </div>
</template>
<script>
  export default ({
    props:{
      childData:String  //数据类型一定要正确
    },
    data(){
      return{

      }
    }
  })
</script>

方法3：

<template>
  <div id="child">
    {{childData}}
  </div>
</template>
<script>
  export default ({
    props:{
      childData:{
        type:String , //数据类型一定要正确
        default:'gogogo'//初始化数据
      }

    },
    data(){
      return{

      }
    }
  })
</script>

二：子组件与父组件通信

由于vue只允许单向数据传递，所以我们可以通过触发事件来通知父组件改变数据，从而来改变子组件的数据。通过$emit来实现

子组件代码

<template>
  <div id="child">
    <button @click="dataTo">子组件点击事件</button>
    {{childData}}
  </div>
</template>
<script>
  export default ({
    props:['childData'],
    data(){
      return{

      }
    },
    methods:{
      dataTo:function () {
        var that=this;
        that.$emit('fatherEvent','childMsg')//主动触发fatherEvent方法，'childMsg'为向父组件传递的数据
      }
    }
  })
</script>

父组件代码：

<template>
  <div id="father">
    <child @fatherEvent="change" :child-data="msg"></child>//监听子组件触发的fatherEvent事件,调用change方法
  </div>
</template>
<script>
import child from './child.vue'
  export default ({
    data(){
      return{
        msg:'hello child'
      }
    },
    methods:{
      change:function (msg) {
        var that=this;
        that.msg=msg;
      }
    },
    components:{
    child
    }
  })
</script>

点击子组件的按钮后，数据从一开始的”hello child“变为”childMsg“

猜你喜欢