Vue-父子组件通信

1. 场景

　　在Vue前端开发过程中，经常会遇到组件通信的问题，如父组件传递值给子组件，或者子组件向父组件传递值，下面介绍一个组件之间如何进行通信；

2. 组件通信

2.1 父组件与子组件通信

　　父组件向子组件通信的方式有两种：

• 直接传值，使用v-bind:data="data"；
• 通过使用子组件的方法，传递值，this.$refs.sunVueRef.method(param1,param2);
• 通过使用子组件的属性，传递值，this.$refs.sunVueRef.param = value;

2.1.1 直接传值

（1）创建父组件，同时在父组件引入子组件；

<template>
  <div>
    <span>向子组件传递值：</span>
    <el-input v-model="msg" size="mini" class="w100"></el-input>
    <div style="padding-top: 30px">
      <sunVue :msg="msg"></sunVue>
    </div>
  </div>
</template>

<script>
  import sunVue from './sun'

  export default {
    name: '',
    components: {
      sunVue
    },
    data () {
      return {
        msg: '传递给子组件显示'
      }
    }
  }
</script>

 

（2）创建子组件，使用props接收;

<template>
  <div>
    <span>显示父组件传递的值：</span>
    <span>{{msg}}</span>
  </div>
</template>

<script>
  export default {
    name: '',
    props: {
      msg: String,
      default: function () {
        return ''
      }
    }
  }
</script>

 

（3）效果

• 初始效果

 

 

•  当在输入框输入内容后，

 

（4）关键代码

• 父组件传值：

<sunVue :msg="msg"></sunVue>

• 子组件接收值：

    props: {
      msg: String,
      default: function () {
        return ''
      }
    }

 

2.1.2 通过使用子组件的方法（$refs）

(1)创建父组件，引入子组件；

<template>
  <div>
    <span>向子组件传递值：</span>
    <el-input v-model="msg" size="mini" class="w100" type="text" @change="changeSunMsg"></el-input>
    <div style="padding-top: 30px">
      <sunVue ref="sunVueRef"></sunVue>
    </div>
  </div>
</template>

<script>
  import sunVue from './sun'

  export default {
    name: '',
    components: {
      sunVue
    },
    data () {
      return {
        msg: ''
      }
    },
    methods: {
      changeSunMsg (msg) {
        this.$refs.sunVueRef.initMsg(msg);
      }
    }
  }
</script>

 

（2）创建子组件，定义方法；

<template>
  <div>
    <span>显示父组件传递的值：</span>
    <span>{{msg}}</span>
  </div>
</template>

<script>
  export default {
    name: '',
    data () {
      return {
        msg: ''
      }
    },
    methods: {
      initMsg (msg) {
        this.msg = msg
      }
    }
  }
</script>

 

（3）效果

• 初始效果
  

   

   

• 输入内容

 

 

 

 

（4）关键代码

• 父组件使用子组件的方法：

    methods: {
      changeSunMsg (msg) {
        this.$refs.sunVueRef.initMsg(msg);
      }
    }

 

2.1.3 父组件给子组件属性赋值

　　也可直接在父组件中修改子组件的属性，也可以实现传值：

    methods: {
      changeSunMsg (msg) {
        this.$refs.sunVueRef.msg = msg
      }
    }

 

2.2 子组件与父组件通信

　　子组件与父组件通信使用$emit，子组件调用父组件的方法；

（1）创建父组件；

<template>
  <div>
    <span>显示字组件的值：</span>
    <span>{{msg}}</span>
    <div style="padding-top: 30px">
      <sunVue ref="sunVueRef" @getSubValue="getSubValue"></sunVue>
    </div>
  </div>
</template>

<script>
  import sunVue from './sun'

  export default {
    name: '',
    components: {
      sunVue
    },
    data () {
      return {
        msg: ''
      }
    },
    methods: {
      getSubValue (msg) {
        this.msg = msg
      }
    }
  }
</script>

（2）创建子组件，使用父组件方法传值；

<template>
  <div>
    <span>修改父组件的值：</span>
    <el-input v-model="msg" size="mini" class="w100" type="text" @change="changeMsg"></el-input>
  </div>
</template>

<script>
  export default {
    name: '',
    data () {
      return {
        msg: ''
      }
    },
    methods: {
      changeMsg (msg) {
        this.$emit('getSubValue',msg);
      }
    }
  }
</script>

（3）效果

• 初始效果

• 输入内容

 

 

 

（4）关键代码

• 子组件向父组件传值

    methods: {
      changeMsg (msg) {
        this.$emit('getSubValue',msg);
      }
    }

• 父组件定义接收的方法

<sunVue ref="sunVueRef" @getSubValue="getSubValue"></sunVue>

3. 总结

　　组件通信在Vue开发中非常重要，掌握之后其实感觉用起来也很简单、方便。