应用六：Vue之父子组件间的三种通信方式

 

（注：本文适用于有一定Vue基础或开发经验的读者，文章就知识点的讲解不一定全面，但却是开发过程中很实用的）

 

　　组件是Vue的核心功能之一，也是我们在开发过程中经常要用到的。各个独立的组件之间如何进行数据的交互，下面介绍三种个人在开发过程中用过的方法~

 

1、props与$emit

　　父组件通过props的方式向子组件传递数据；子组件通过$emit，在父组件中以v-on的方式接收回传的数据。接下来请看下面一个实例，

　　定义父组件parent.vue，添加如下代码：

<template>
  <div id="demo">
    <child :message="message" @getInputValue="getInputValue"></child>
  </div>
</template>

<script>
import child  from '@/components/common/child.vue';
export default {
  name: 'demo',
  components: {
    child
  },
  data() {
    return {
      message: 'hello'
    }
  },
  methods: {
    getInputValue(val) {
      this.message = val
      console.log(this.message)
    }
  }
}
</script>

 

　　定义子组件child.vue，添加如下代码：

<template>
  <div id="child">
    <el-input v-model="message" clearable placeholder="" @change="handleChangeInput"></el-input>
  </div>
</template>

<script>
export default {
  name: 'child',
  props: {
    message: String
  },
  methods: {
    handleChangeInput(val) {
      this.$emit('getInputValue', val)
    }
  }
}
</script>

 

　　假如子组件要访问在父组件中定义的数据message，首先要在父组件引用的子组件标签中绑定该数据，然后以props的方式传递到子组件；子组件对message做了修改之后以$emit的方式回传给父组件，父组件以方法getInputValue接收并重新赋值给message。

 

2、在子组件中定义get与set方法

　　先看如下的两段代码，定义父组件parent.vue，添加如下代码：

<template>
  <div id="demo">
    <child ref="childComponent"></child><br>
    <el-button type="primary" @click="clickSet">set</el-button>
    <el-button type="primary" @click="clickGet">get</el-button>
  </div>
</template>

<script>
import child  from '@/components/common/child.vue';
export default {
  name: 'demo',
  components: {
    child
  },
  methods: {
    clickSet() {
      this.$refs.childComponent.setMessage('hello world');
    },
    clickGet() {
      let msg = this.$refs.childComponent.getMessage();
      console.log(msg);
    }
  }
}
</script>

 

　　定义子组件child.vue，添加如下代码：

<template>
  <div id="child">
    <span>{{message}}</span>
  </div>
</template>

<script>
export default {
  name: 'child',
  data() {
    return {
      message: 'hello'
    }
  },
  methods: {
    getMessage() {
      return this.message;
    },
    setMessage(val) {
      this.message = val;
    }
  }
}
</script>

 

　　假如父组件要访问在子组件中定义的数据message，可以通过$refs的方式访问子组件中定义的getMessage和setMessage方法。

 

3、Vuex

　　vuex状态管理用于全局存储数据状态，具体的应用请查阅前文《应用四：Vue之VUEX状态管理》，在此就不再详细说明。