Vue常见组件间通信方案及典型应用场景详解

  // 定义组件h1-box
  Vue.component("h1-box", {
    // 通过props设置自定义属性title接收组件外传值
    props: ["title"],
    // 通过emits设置自定义事件向外部发送事件
    emits: ['give'],
    methods:{
      clickHandler(){
        // 通过$emit() 方法触发执行把当前组件数据带出去
        this.$emit('give',{name:'lucy'})
      }
    },
    mounted() {
      // 通过this.title可以获取外部传入组件的值
      console.log(this.title);
    },
  });

<div id="app">
  <!-- 组件 -->
  <son ref="son"></son>
</div>
new Vue({
  el: "#app",
  mounted() {
    // 获取到组件实例，就可以任意操作组件实例
    console.log(this.$refs.son);
    let vm2 = this.$refs.son;
    // 修改son组件的响应式数据msg
    vm2.msg = "sz2111";
    // 调用son组件的changeMsg方法
    vm2.changeMsg("sz2116");
  },
  components: {
    // 定义组件son
    son: {
      data() {
        return {
          msg: "sz2114",
        };
      },
      methods: {
        changeMsg(val) {
          this.msg = val;
        },
      },
      template: `<h1>hello world</h1>`,
    },
  },
});

  <!-- 父组件app -->
  <div id="app">
    <!-- 子组件font -->
    <font :font="fontSize"></font>
    <!-- 子组件title -->
    <title :font="fontSize"></title>
  </div>
  // 父组件
  new Vue({
    el:'#app',
    data:{
      // 把子组件共同需要的数据存储在共同的父组件上
      fontSize:12
    }
  })
  // 子组件
  Vue.component('font',{
    // 通过自定义属性接受父组件传入的值
    props:['font'],
    template:`<div :style="{fontSize:font+'px'}">hello</div>`
  })
  // 子组件
  Vue.component('title',{
    // 通过自定义属性接受父组件传入的值
    props:['font'],
    template:`<div :style="{fontSize:font+'px'}">world</div>`
  })

 <div id="app">
    <three></three>
  </div>

 // 根组件
  new Vue({
    el: "#app",
    // provide用于在一个vue实例里面给后面的子孙实例传递数据
    provide: function () {
      return {
        a: 100,
        c: 300,
        d: this.obj,
      };
    }
  });
  // 定义组件one
  Vue.component("one", {
    // inject用于在子孙组件中接收祖先通过provide传入的变量c
    inject: ["a"],
    template: `
      <div>
        <h1>我是one组件---{{a}}</h1>
      </div>
    `,
  });
  // 定义组件two，里面有子组件one
  Vue.component("two", {
    // inject用于在子孙组件中接收祖先通过provide传入的变量c，并重名成myC
    inject: {
      myC: "c",
    },
    template: `
      <div>
        <h1>我是two组件---{{myC}}</h1>
        <one></one>
      </div>
    `,
  });
  // 定义组件three,里面有子组件two
  Vue.component("three", {
    // inject用于在子孙组件中接收祖先通过provide传入的变量b，并重名成bbb，同时设置默认值299999
    inject: {
      bbb: {
        from: "b",
        default: 299999,
      },
    },
    template: `
      <div>
        <h1>我是three组件---{{bbb}}</h1>
        <two></two>
      </div>
    `,
  });

  <div id="app">
    <child>
      <template #abc>
        <h1>sz2114</h1>
        <h2>sz2115</h2>
        <h3>sz2116</h3>
      </template>
      <template #cindy>
        <h1>sz2014</h1>
        <h2>sz2015</h2>
        <h3>sz2016</h3>
      </template>
    </child>
  </div>
  // 全局组件
  Vue.component("child", {
    template: `
        <div>
            <slot name='cindy'></slot>
            <h1>hello world</h1>
            <slot name='abc'></slot>
        </div>
    `,
  });
  let vm = new Vue({
    el: "#app",
  });

    <div id="app">
      <input type="text" v-model="duanxin1" />
      <button @click="clickHandler">给老师发消息</button>
    </div>
      // 中央事件总线: 类似一个事件对象
      // 就像一个电信局
      var bus = new Vue();
      // 每个人就收短信都需要一个号码 (事件名)
      // 想要接收短信要先去电信办个卡 -- 注册一个号码
      bus.$on("cyrevent", function (data) {
        console.log("短信内容是");
        console.log(data);
      });
      new Vue({
        el: "#app",
        data() {
          return {
            duanxin1: "",
          };
        },
        methods: {
          clickHandler() {
            // 别人想给我发消息
            bus.$emit("cyrevent", this.duanxin1);
          },
        },
      });