1值朋、多級組件間傳值主要包括以下3種方法：
vuex：通過將多個組件共享的變量全部存儲在對象store中并將這個對象放到頂層vue實例中讲逛，讓其他組件可以隨時使用store對象中的數(shù)據(jù)，其最大的優(yōu)點是響應(yīng)式突那。所以單純的組件間傳值使用vuex就有些大材小用了独旷，vuex一般用于大型的項目。
provide/inject:vue2.2+版本支持宿稀，該屬性必須一起使用趁舀，以達(dá)到祖先組件向其子孫組件提供一個依賴注入，不論組件層次多深祝沸，在上下游關(guān)系成立期間始終有效矮烹，多用于高階組件封裝，邏輯代碼中慎用罩锐。
listeners:vue2.4+版本支持奉狈，attrs會包含所有父作用域的綁定（style class除外）仁期，并且可以通過v-bind="listeners包含父作用域中（不含.native修飾器的）v-on時間監(jiān)聽器蟀拷，它可以通過v-on="$listeners"傳入內(nèi)部組件，在創(chuàng)建高層次組件時非常有用萍聊。
2问芬、provide/inject詳細(xì)介紹
示例：

<template>
  <div>
    <input v-model="inputName" />
    <parent></parent>
  </div>
</template>
<script>
import parent from "./parent.vue";
export default {
  name: "swRegister",
  components: {
    parent,
  },
  data() {
    return {
      tdata: [
        {
          id: "1",
          name: "dlj1",
        },
        {
          id: "2",
          name: "dlj2",
        },
        {
          id: "3",
          name: "dlj3",
        },
      ],
      inputName: "",
    };
  },
  provide() {
    return {
      tdt: this.tdata, //傳遞數(shù)據(jù)
      showMsg: this.showMsg, //傳遞方法
      showInput: () => this.inputName, //實現(xiàn)響應(yīng)式 
    };
  },
  methods: {
    showMsg() {
      console.log("祖父組件中定義的方法");
    },
  },
};
</script>

<template>
  <div><child-t></child-t></div>
</template>

<script>
import childT from "./childT.vue";
export default {
  components: { childT },
  name: "parent",
  data() {
    return {};
  },
};
</script>

  <div>
    <h3>{{ compH3 }}</h3>
    <ul>
      <li v-for="(item, index) in tdt" :key="index">{{ item.name }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  name: "childT",
  inject: ["tdt", "showMsg", "showInput"],
  data() {
    return {};
  },
  computed: {
    compH3() {
      return this.showInput();
    },
  },
  mounted() {
    this.showMsg();
  },
};
</script>

效果圖

控制臺會輸出“祖父組件中定義的方法”，說明provide/inject可以傳遞并注入數(shù)據(jù)和方法寿桨。另外此衅，provide/inject邦迪不是響應(yīng)式的（設(shè)計如此）强戴，但是當(dāng)傳入一個可監(jiān)聽的對象時，其對象屬性是可以響應(yīng)的挡鞍，例如代碼中inputName實現(xiàn)了響應(yīng)式骑歹。
3、attrs/attrs用于傳遞屬性道媚，atttrs屬性是否顯示在標(biāo)簽上 翘县，false--不顯示最域。
示例
祖組件

<template>
  <div>
    <h3>祖組件</h3>
    <parent1
      :p-child1="child1"
      :p-child2="child2"
      :p-child3="child3"
      :p-child4="child4"
      @test1="onTest1"
      @test2="onTest2"
      @test3="onTest3"
      @test4="onTest4"
    ></parent1>
  </div>
</template>
<script>
import parent1 from "./parent1.vue";
export default {
  name: "searchDocument",
  components: {
    parent1,
  },
  data() {
    return {
      child1: "child1",
      child2: "child2",
      child3: "child3",
      child4: "child4",
    };
  },
  methods: {
    onTest1() {
      console.log("祖組件定義的方法--> onTest1 ");
    },
    onTest2() {
      console.log("祖組件定義的方法--> onTest2 ");
    },
    onTest3() {
      console.log("祖組件定義的方法--> onTest3 ");
    },
    onTest4() {
      console.log("祖組件定義的方法--> onTest4 ");
    },
  },
};
</script>

父組件

<template>
  <div>
    <h3>父組件</h3>
    <p>props:{{ pChild1 }}</p>
    <p>$attrs:{{ $attrs }}</p>
    <child1 v-bind="$attrs" v-on="$listeners"></child1>
  </div>
</template>

<script>
import child1 from "./child1.vue";
export default {
  components: { child1 },
  name: "parent1",
  data() {
    return {};
  },
  props: ["pChild1"],
  inheritAttrs: true,
  mounted() {
    this.$emit("test1");
  },
};
</script>

子組件

<template>
  <div>
    <h3>子組件</h3>
    <p>props:{{ pChild2 }}</p>
    <p>$attrs:{{ $attrs }}</p>
    <child2 v-bind="$attrs" v-on="$listeners"></child2>
  </div>
</template>

<script>
import child2 from "./child2.vue";
export default {
  components: { child2 },
  name: "child1",
  data() {
    return {};
  },
  props: ["pChild2"],
  inheritAttrs: false,
  mounted() {
    this.$emit("test2");
  },
};
</script>

孫組件

<template>
  <div>
    <h3>孫組件</h3>
    <p>props:{{ pChild3 }}</p>
    <p>$attrs:{{ $attrs }}</p>
  </div>
</template>

<script>
export default {
  name: "child2",
  data() {
    return {};
  },
  props: ["pChild3"],
  inheritAttrs: false,
  created() {
    this.$emit("test3");
  },
  mounted() {
    console.log("chlild2 $attrs ", this.$attrs, this.$attrs.pChild4); //不能通過this.$attrs.pChild4訪問屬性
    // this.pChild3 = "111";//錯誤 子組件不能修改父組件傳遞過來的值
    this.$emit("test4");
    this.$emit("test2");
  },
};
</script>

效果圖

控制臺輸出

inheritAttrs=true/false區(qū)別

3、補(bǔ)充
在 Vue 中锈麸，父子組件的關(guān)系可以總結(jié)為 props 向下傳遞镀脂，事件向上傳遞。父組件通過 props給子組件下發(fā)數(shù)據(jù)忘伞，子組件通過事件給父組件發(fā)送消息薄翅。
Props 是單向綁定的：當(dāng)父組件的屬性變化時，將傳導(dǎo)給子組件氓奈，但是反過來不會翘魄。這是為了防止子組件無意間修改了父組件的狀態(tài)，來避免應(yīng)用的數(shù)據(jù)流變得難以理解舀奶。

解決辦法：
　　原理：將要更改的值熟丸，傳遞給父組件，在父組件中更改伪节，再傳遞給子組件
　步驟：
　　先將值傳遞給子組件，子組件 props 接收并使用绩鸣，然后通過 $emit 廣播一個事件給父組件怀大，并將值一并傳遞，父組件 @子組件廣播過來的事件呀闻，并定義一個方法化借，在該方法中，改變傳遞過來的值捡多，父組件又會將值傳遞給子組件蓖康，這樣就形成了一個閉環(huán)，問題得以解決垒手。
子組件不能修改父組件傳遞過來的值的原因蒜焊，就是因為vue的單向數(shù)據(jù)流限制，當(dāng)然科贬，這個限制是很有必要的泳梆，我們假設(shè)一個場景鳖悠，父組件有多個子組件，都用到了某個傳遞的參數(shù)优妙，其中一個子組件修改了父組件傳遞過來的值乘综，那么其他的子組件接收到的也會是改變后的值，這樣顯然是不合理的套硼。
　　既然不能直接修改卡辰，那么，我們不妨在子組件定義一個副本邪意，用來接收父組件傳遞過來的值九妈，子組件定義的每個參數(shù)，其作用域都只局限于當(dāng)前組件抄罕，所以允蚣，直接修改副本，并不會影響其他子組件呆贿。