Vue子组件向父组件通讯，父组件向子组件通讯

首先，子组件代码以下

<template>
  <div style="border:1px solid black;width:400px;">
    <h3>我是子组件里的</h3>
    <button>点击按钮子组件传递父组件</button>
    <div>我是父组件传子组件显示的:我尚未值</div>
  </div>
</template> 

<script>
export default {
  data() {
    return {};
  },
  components: {},
  methods: {}
};
</script>

父组件代码以下

<template>
  <div style="border:1px solid red;padding:2rem;width:500px;margin:50px auto;">
    <h3>我是父组件里的</h3>
    <div>我是子组件向父组件传递的:我尚未值</div>
    <MyChild></MyChild>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },
  components: {},
  methods: {}
};
</script>

网页显示如图：

 

网页显示能够清晰的看出来父子组件的结构，父组件包裹着子组件。

首先，咱们先让父组件向子组件通讯吧。实现方法是在子组件经过props来接受父组件传过来的值。咱们在父组件定义了一个名为data的值，在子组件标签里bind动态绑定了这个值，以下图所示

先定义变量

修改MyChild标签内容

接着在子组件里经过props来接收，以下图

 这样子组件就接收到了父组件传递过来的值了，咱们经过修改如下代码来看看这个值到底有没有接收到

 能够看到，咱们父向子通讯已经实现了，接下来就是子向父通讯了，这个就要使用到this.$emit方法了。经过this.$emit("")来自定义事件，而后在父组件中监听事件。

在子组件中给button按钮click事件，来经过this.$emit自定义事件，并传入一个参数，具体修改代码如图：

在父组件中的子组件标签里，先在data里定义一个变量接收这个值，监听自定义事件，并接受这个参数赋值给定义的变量，修改代码如图：

再添加一个变量

 而后再修改MyChild标签

再在父组件的div里显示，代码以下：

 如今进入到浏览器中，点击子传父的按钮，结果出来了，下图展现整个运行结果

由此子向父，父向子通讯就都完成了。

讲的可能有些乱，附上完整代码就好多了：

Home.vue

<template>
  <div style="border:1px solid red;padding:2rem;width:500px;margin:50px auto;">
    <h3>我是父组件里的</h3>
    <div>我是子组件向父组件传递的:{{childData}}</div>
    <MyChild :fromFather="data" @ListenerChild="(data)=>this.childData = data"></MyChild>
  </div>
</template>

<script>
import MyChild from "./Child";
export default {
  data() {
    return {
      data: "I am your father",
      childData: ""
    };
  },
  components: {
    MyChild
  },
  methods: {}
};
</script>

Child.vue

<template>
  <div style="border:1px solid black;width:400px;">
    <h3>我是子组件里的</h3>
    <button @click="()=>this.$emit('ListenerChild', 'I am your child')">点击按钮子组件传递父组件</button>
    <div>我是父组件传子组件显示的:{{fromFather}}</div>
  </div>
</template>

<script>
export default {
  props: ["fromFather"],
  data() {
    return {};
  },
  components: {},
  methods: {}
};
</script>