Vue 两种组件通信方法

目录：

• 父组件向子组件传递信息途径 —— props
• 子组件向父组件通信 —— $emit方法
• vuex状态机通信方式 （另见标签页）
  参考链接：https://juejin.im/post/6844904082956615688

---

第一种方法：props

• 适用父组件向子组件传递信息的方法：
  这里只注重讲解父子组件传递方法，不做代码细讲，想看更详细的单文件组件请点击下面链接https://codesandbox.io/s/clever-shape-sepzz?file=/src/components/Home.vue

1. 父组件 =》 子组件 通信（props）

1. 首先创建一个Vue项目，其中App.vue作为父组件，Home.vue为子组件

2. 父组件中创建标签：

• template内容：

• script 内容：

3.子组件Home创建标签

• template中填写内容：

• script中的内容：

4. 此时页面子组件中已经渲染出来了父组件传递的内容，再 在父子组件中各自添加样式就ＯK啦!

---

插曲：$emit()实例方法

了解子组件向父组件传递信息时不得不了解该方法的用法

$emit(eventName,[... argumentes])
//eventName 是事件名，在本文中下面的内容中是指父组件中的事件名sayYes()或sayNo()事件
//arguments是参数，它可以是字符串，也可以是对象，可有可无，通常指data中设置的变量。

---

第二种方法：$emit()

• 这一种方法适合用于子组件向父组件传递
  子组件通过$emit()实例方法触发Vue实例上的事件，父组件通过 v-on 事件修饰符监听 原生DOM事件，从而把信息渲染出来。

1. 创建父组件：

• tempalte内容：

• script中的内容

  export default {
    name: "App",
    data() {
      return {
        val: ""
      };
    },
    components: {
      Home
    },
    methods: {
    //  子组件收到事件后通过$emit()实例方法触发父组件的native　DOM事件，父组件会通过v-on 修饰符监听这个信息，收到后进行相关的事件
      sayYes() {
        this.val = "yes";
      },
      sayNo() {
        this.val = "no";
      }
    }
  };

3. 子组件中创建标签

• template中的内容

  //这里的btnHandleClick()事件是子组件自己的事件，用户通过页面点击等操作触发这个事件，然后子组件通过$emit()触发父组件中自定义native DOM的事件（这里父组件中的事件是sayYes()或sayNo()事件）
  

• script中的内容：

就这样我们的页面中能看到当点击子组件中的选项时在父组件内容中显示结果。
demo链接：https://codesandbox.io/s/young-paper-vzwbg

---