vue 组件通信

组件通信就是传值。

父子组件

子拿到了父的数据。

实现方式（一）

父组件引入子组件，绑定数据；子组件用props接收，但是子组件不能直接修改父组件的数据。此种方法无法做到直接传到孙组件，需要逐层传递。

// 用`cva`搭建项目
yarn global add create-vite-app  //安装vite
cva <your-project-name>  //创建项目，cva是缩写
cd <your-project-name>
yarn   //安装依赖，相当于 yarn install
yarn dev  

// App.vue 父组件
<template>
  <div class="home">
    <h1>这是Home</h1>
    <hr />
    <!--父组件引入子组件，绑定数据--> 
    <List :str1="str1"></List>
  </div>
</template>
  
<script>
import List from "./components/List.vue";
export default {
  name: "App",
  data() {
    return {
      str1: "这是home的数据",
    };
  },
  components: { List },
};
</script>

// List.vue 子组件
<template>
  <div>
    <h2>这是List组件{{ str1 }}</h2>
  </div>
</template>

<script>
export default {
  // 子组件通过 props 接收
  props: {
    str1: {
      type: String,
      default: "",
    },
  },
};
</script>

实现方式（二）

子组件用$parent直接使用父组件数据。子组件还可以直接修改父组件的数据。

// List.vue 子组件
<template>
  <div>
    <h2>这是List组件{{ $parent.str1 }}</h2>
    <hr />
    <News :str1="str1"></News>
  </div>
</template>

依赖注入

// App.vue 父组件

provide() {
  return {
    val1: "这是home的依赖内容",
  };
},

// News.vue 后代组件

<h3>这是News组件{{ val1 }}</h3>

export default {
  inject: ['val1'],
};

后代传父

子传父

在子组件中定义自定义事件 $emit

// List.vue 子组件
<template>
  <div>
    <h2>这是List组件</h2>
    <button @click="btn">按钮</button>
    <hr />
  </div>
</template>

<script>
export default {
  data() {
    return {
      str2: "这是List组件的数据",
    };
  },
  methods: {
    btn() {
      this.$emit("change", this.str2);
    },
  },
};
</script>

// App.vue 父组件
<template>
  <div class="home">
    <h1>这是Home{{ str2 }}</h1>
    <hr />
    <List @change="homeBtn"></List>
  </div>
</template>
  
<script>
import List from "./components/List.vue";
export default {
  name: "App",
  data() {
    return {
      str2: "",
    };
  },
  components: {List},
  methods: {
    homeBtn(val) {
      this.str2 = val;
    },
  },
};
</script>

兄弟组件通信

用 eventBus