vueのコンポーネントの値を伝えるいくつかの方法を知っていますか?

vueにおけるコンポーネントの値伝達のいくつかの方法
1.親コンポーネントから子コンポーネントに値を渡す
一般的にサブコンポーネントにpropsを定義して受信します
親コンポーネント:

export default {
  data() {
    return {
      msg: "     ，      "
    };
  }
};

サブアセンブリ

export default {
    //      props     
  props: {
    msg: {type: String}
  }
};

2.子コンポーネントから親コンポーネントへの値の伝達
この場合,vueの$emitを用いて伝達したい値を関数の形式で伝達し,親コンポーネントで受信する必要がある.

this.$emit(arg1,arg2) arg1:    ，arg2:     

サブアセンブリ

export default {
  data() {
    return {
      msg: "      ，        "
    };
  },
  methods: {
    toParent() {
        //     $emit   toParent     this.msg 
      this.$emit("toParent", this.msg);
    }
  }
};

親コンポーネント

export default {
  data() {
    return {
      child2Msg: ""
    };
  },
  methods: {
    getMag(msg) {
      this.child2Msg = msg;
    }
  }
};

3.兄弟コンポーネントの評価
これは最初のサブコンポーネントです.ここから別のサブコンポーネントに値を伝えます.

export default {
  data() {
    return {
      toMsg: "    "
    };
  },
  methods: {
    toBrother() {
      this.$emit("sendBrother", this.toMsg);
    }
  }
};

これは2番目のサブコンポーネントです.受信者として使用されます.

export default {
  data() {
    return {
      get: ""
    };
  },
  beforeCreate() {
    this.$on("sendBrother", msg => {
      this.get = msg;
    });
  }
};

4.$parent$childrenと$refs
4.1$refs親コンポーネントは、サブコンポーネントのすべての値を取得できます.

//   ：
   

//   ： 
//        this.$refs.        data    
console.log(this.$refs.child.msg)    
this.$refs.child.do()  

4.2$children親コンポーネントサブコンポーネントのすべての値を取得
$childrenはサブコンポーネントの配列を取得し、インデックスによって対応するサブコンポーネントのインスタンスを見つけます.

//               ：
     

//   ：
//        this.$children[0].        data    
console.log(this.$children[0].msg) this.$children[0].childClick() 

4.3$parentサブコンポーネントすべての親コンポーネント値を取得
コンポーネント$parentによる親コンポーネントのデータとメソッドの取得

//                ：
 

//   ：
//           this.$parent.             
childClick() {
      console.log(this.$parent.msg);
      this.$parent.fatherMethod();
    }

注意:$rootと$parentは、親コンポーネントへのアクセスのプロパティと方法を実装できます.両者の違いは、マルチレベルのサブコンポーネントが存在する場合、parentによってアクセスされたのは最上位の親コンポーネントであり、rootによってアクセスされたのはルートの親コンポーネント(App.vue)です.コンポーネントのネストがある場合は$rootを使用しないでください