組件通信邊界情況

demo github地址：feature/communicationOther 分支

• $parent 、 $children 、$root 、$refs
• 非Props特性（不需要Props）
  $attrs ( 祖先(定義屬性名) --> 父(v-bind="$attrs") --> 子($attrs.祖先屬性名) )
  $listeners ( 祖先(定義事件) --> 父(v-on="$listeners") --> 子($listeners.祖先事件) )
• provide / inject (跨層傳參)

1. $parent 、 $children 、$root 、$refs

<!--- main.js -->
new Vue({
  router,
  store,
  render: h => h(App),
  methods : {
    handleRoot() {   <!-- 為子組件提供根組件方法 -->
      return 'event from root'
    }
  }
}).$mount('#app')

<!-- Parent.vue -->
<template>
  <div>
    <p>Parent</p>
    <button @click="getChildVal">獲取子傳給父的值(this.$children[0].toParent)</button><br/>
    <p v-if="childVal">{{childVal}}</p>
    <button @click="getChildByRefs">獲取子傳給父的值(this.$refs.child1.toParentRefs)</button><br/>
    <p v-if="childRefsVal">{{childRefsVal}}</p>
    <hr/>
    <Child ref="child1"></Child>
  </div>
</template>

<script>
  import Child from "../components/Child";
  export default {
    components: {
      Child
    },
    data() {
      return {
        childVal: '',
        childRefsVal: ''
      };
    },
    methods: {
      handleParent() {
        return "event for parent!";
      },
      getChildVal() {
        //children 是一個(gè)數(shù)組， 對(duì)于異步子組件或者按需加載子組件 children的下標(biāo) 有可能不準(zhǔn)
        this.childVal = this.$children[0].toParent();
      },
      getChildByRefs() {
        this.childRefsVal = this.$refs.child1.toParentRefs();
      }
    },
  };
</script>

<!-- Child.vue -->
<template>
  <div>
    <p>Child</p>
    <button @click="getParent">執(zhí)行父組件方法(this.$parent.handleParent())</button><br/>
    <p v-if="parent">父組件方法的返回值 ： {{parent}}</p>
    <button @click="getRoot">執(zhí)行根組件方法(this.$root.handleRoot())</button>
    <p v-if="root">根組件方法的返回值 ： {{root}}</p>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        parent: '',
        root: '',
        count: 1
      }
    },
    methods: {
      getParent() {
        this.parent = this.$parent.handleParent();
      },
      getRoot() {
        this.root = this.$root.handleRoot();
      },
      toParent() {
        return `children value to parent ${this.count++}`
      },
      toParentRefs(){
        return 'children refs value to parent'
      }
    },
  };
</script>

2. $attrs 、$listeners 非Props特性

<!-- grandpa.vue -->
<template>
  <div>
    <h2>Grandpa</h2>
    <hr/>
    <Parent msg="把這個(gè)消息傳送給我孫子" other="這個(gè)消息也別用props傳了"  @testOne="test1" @testTwo="test2"></Parent>
  </div>
</template>
<script>
  import Parent from "../components/grandpa/Parent"
  export default {
    components:{
      Parent
    },
    methods: {
      test1() {
        alert('grandpa 傳給 孫子的 第一個(gè)事件！');
      },
      test2() {
        alert('grandpa 傳給 孫子的 第二個(gè)事件！');
      }
    },
  };
</script>

<!-- parent.vue -->
<template>
  <div>
    <h2>Parent</h2>
    <hr/>
    <Child v-bind="this.$attrs" v-on="this.$listeners"></Child>
  </div>
</template>

<script>
  import Child from "./Child";
  export default {
    components: {
      Child
    }
  };
</script>

<!-- child.vue -->
<template>
  <div>
    <h2>Child</h2>
    <p>這個(gè)是爺爺傳給孫子的信息($attrs)：<i>{{$attrs}}</i></p>
    <button @click="childOne">執(zhí)行g(shù)randpa的test1()</button>
    <button @click="$listeners.testTwo()">執(zhí)行g(shù)randpa的test2()</button>
    <button @click="$emit('testOne')">執(zhí)行g(shù)randpa的test1()</button>
  </div>
</template>

<script>
  export default {
    methods: {
      childOne() {
        this.$listeners.testOne();
      }
    }
  };
</script>

3.provide / inject (跨層傳參)

<!-- 第一層 grandpa.vue -->
<script>
    export default {
        provide() {
             return {
                grandpa:'提供跨層參數(shù)'
            }
        }
    }
</script>

<!-- 第三層 孫子輩兒 child.vue -->
<script>
<template>
<div>
      <p>{{grandpa}}</p>
</div>
</template>
 export default {
    //inject : ['grandpa'],
  inject: {
      grandpa: {
          type: String,
          default: "" 
      }
  }
}
</script>