// 定義組件h1-box
  Vue.component("h1-box", {
    // 通過props設(shè)置自定義屬性title接收組件外傳值
    props: ["title"],
    // 通過emits設(shè)置自定義事件向外部發(fā)送事件
    emits: ['give'],
    methods:{
      clickHandler(){
        // 通過$emit() 方法觸發(fā)執(zhí)行把當(dāng)前組件數(shù)據(jù)帶出去
        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() {
    // 獲取到組件實(shí)例，就可以任意操作組件實(shí)例
    console.log(this.$refs.son);
    let vm2 = this.$refs.son;
    // 修改son組件的響應(yīng)式數(shù)據(jù)msg
    vm2.msg = "sz2111";
    // 調(diào)用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:{
      // 把子組件共同需要的數(shù)據(jù)存儲(chǔ)在共同的父組件上
      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用于在一個(gè)vue實(shí)例里面給后面的子孫實(shí)例傳遞數(shù)據(jù)
    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，同時(shí)設(shè)置默認(rèn)值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">給老師發(fā)消息</button>
    </div>
      // 中央事件總線: 類似一個(gè)事件對(duì)象
      // 就像一個(gè)電信局
      var bus = new Vue();
      // 每個(gè)人就收短信都需要一個(gè)號(hào)碼 (事件名)
      // 想要接收短信要先去電信辦個(gè)卡 -- 注冊一個(gè)號(hào)碼
      bus.$on("cyrevent", function (data) {
        console.log("短信內(nèi)容是");
        console.log(data);
      });
      new Vue({
        el: "#app",
        data() {
          return {
            duanxin1: "",
          };
        },
        methods: {
          clickHandler() {
            // 別人想給我發(fā)消息
            bus.$emit("cyrevent", this.duanxin1);
          },
        },
      });