组件通讯

首先在components文件夹下创建子组件
使用步骤有三步
1.引入 import xxx from "../components/xxx.vue"
2.注册 在选项对象components下注册子组件
3.使用 作为标签使用

1.父传子：

在父组件中给子组件标签上绑定一个属性， 属性上挂载需要传递的值在子组件通过props:[“自定义属性名”]来接收数据

1.把父组件要传的data作为自定义属性绑在子组件上，注意是动态绑定，因为传的是一个变量
2.在子组件用props接收，接收的格式是一个数组props:["msg"]
props也是一个选项对象，跟data同级

父组件代码示例：

<template>
  <div class="home">
    <child :msg="parentmsg"></child>
    <!-- 要向子组件child里传递 父组件里的数据parentmsg,先把数据作为自定义属性绑定在子组件上 -->
    <h1>{{ parentmsg }}</h1>
  </div>
</template>

<script>
import child from "../components/Child.vue";
export default {
  data() {
    return {
      parentmsg: "home里的数据msg",
    };
  },
  components: {
    child,
  },
};

</script>

子组件代码示例：

<template>
  <div>
    <h1>这是一个子组件child</h1>
    <h2>来自父组件的数据：{{ msg }}</h2>
  </div>
</template>
<script>
export default {
  props: ["msg"],
};
</script>
<style lang="scss"></style>

2.子传父：

在父组件中给子组件标签绑定一个自定义事件，给这个事件挂载需要调用的方法在子组件的方法通过this.$emit(‘自定义事件名’)来调用这个方法

（本质是父组件把他的方法传递给子组件，在子组件里调用这个自定义事件，在调用这个事件的时候可以把自己的数据作为参数传递给父组件，就实现了子传父，子传父必须有一个事件触发）

父组件代码示例：

<template>
  <div class="">
    <h1>parent页面</h1>
    <h1>从子组件传过来的数据是：{{ fromson }}</h1>
    <child :aaa="msg" @bbb="funp"></child>
    <!-- 第三步 作为标签使用子组件 -->
  </div>
</template>

<script>
import child from "../components/Child.vue";
//第一步引入子组件
export default {
  data() {
    return {
      msg: "111",
      fromson: "",
    };
  },
  mounted() {},
  methods: {
    funp(val) {
      console.log(val);
      this.fromson = val;
      this.msg = "2222";
    },
  },
  components: {
    child,
    // child: child,
  },
  //第二步注册子组件
};
</script>

<style lang="scss"></style>

子组件代码示例：

<template>
  <div class="">
    <h5>这是一个子组件</h5>
    接收到的父组件的数据是：
    {{ aaa }}
    <button @click="func">调用父组件funp方法</button>
  </div>
</template>

<script>
export default {
  //   props: {
  //     aaa: String,
  //   },
  props: ["aaa"],
  //   props如果不需要识别格式就直接写成数组 如果需要识别格式就写成对象
  data() {
    return {
      msgc: "子组件里的数据msgc",
    };
  },
  mounted() {},
  methods: {
    func() {
      this.$emit("bbb", this.msgc);
      // $emit是专门用来调用自定义事件的
      // 第一个参数 是 要调用的父组件的方法名字 后面的参数是传递给父组件的参数
    },
  },
};
</script>

<style lang="scss"></style>>

3.兄弟组件传值：
通过main.js初始化一个全局的$bus,在发送事件的一方通过$bus.$emit(“事件名”，传递的参数信息)发送，在接收事件的一方通过$bus.$on("事件名",参数)接收传递的事件