vue2のコンポーネント間の12の通信方法、父から息子、息子から父、兄弟から価値（超ハードコア、宝物）

プログラミング 2022-03-23 23:43:03 訪問数: null

プレイする前に親コンポーネントと子コンポーネントを作成してください。楽しくプレイしてください。3時間以上の並べ替えの後、コーディングは簡単ではありません。

1、小道具はデータを転送します

親コンポーネントと子コンポーネントにカスタムプロパティを追加して、渡す必要のあるデータをマウントします。子コンポーネントは小道具を使用してデータを受信します。受信メソッドは配列またはオブジェクトにすることもできます。子コンポーネントがデータを受信した後、親コンポーネントのデータを直接変更することはできません。エラーが報告されるため、親コンポーネントが再レンダリングされると、データが上書きされます。サブコンポーネントを変更する場合は、計算されたものを使用することをお勧めします

// Parent.vue 传送
<template>
    <child :msg="msg"></child>
</template>
​
// Child.vue 接收
export default {
  // 写法一 用数组接收
  props:['msg'],
  // 写法二 用对象接收，可以限定接收的数据类型、设置默认值、验证等
  props:{
      msg:{
          type:String,
          default:'这是默认数据'
      }
  },
  mounted(){
      console.log(this.msg)
  },
}

2、vモデル

.syncと同様に、親コンポーネントから子コンポーネントに渡されるデータは双方向でバインドでき、子コンポーネントは$emitを介して親コンポーネントのデータを変更します。

// 父组件组件 这个是 v-model:obj="value"
<template>
  <div class="">
    <HelloWorld v-model:obj="value"></HelloWorld>
    {
   
   { value }}
  </div>
</template>
<script>
import HelloWorld from "../components/HelloWorld.vue";
export default {
  data() {
    return {
      value: "我是Home里的数据 响应式的",
    };
  },
  components: { HelloWorld },
};
</script>
​
 // 子组件
<template>
  <input :value="obj" @input="handlerChange" />
</template>
<script>
export default {
  props: ["obj"],
  // 可以修改事件名，默认为 input
  model: {
    event: "updateValue",
  },
  methods: {
    handlerChange(e) {
      // 如果有上面的重命名就是这样
      this.$emit("updateValue", e.target.value);
    },
  },
};
</script>
2番目の方法
// 最简单的 v-model实现 父组件 Home 
<template>
  <div class="">
    <HelloWorld v-model="value"></HelloWorld>
    {
   
   { value }}
  </div>
</template>
​
<script>
import HelloWorld from "../components/HelloWorld.vue";
export default {
  data() {
    return {
      value: "我是Home里的数据 响应式的",
    };
  },
  components: { HelloWorld },
};
</script>
// 子组件 HelloWorld
<template>
  <input :value="value" @input="handlerChange" />
</template>
<script>
export default {
  props: ["value"],
  methods: {
    handlerChange(e) {
       // 一定要是 input 事件
      this.$emit("input", e.target.value);
    },
  },
};
</script>

3、.sync

親コンポーネントから子コンポーネントに渡されるデータの双方向バインディングを実現するのに役立つため、子コンポーネントはデータを受信した後にデータを直接変更でき、同時に親コンポーネントのデータも変更できます。

// 父组件 Home
<template>
  <div class="">
    <HelloWorld :val.sync="val"></HelloWorld>
    {
   
   { val }}
  </div>
</template>
​
<script>
import HelloWorld from "../components/HelloWorld.vue";
export default {
  data() {
    return {
      val: "我是Home里的数据 响应式的",
    };
  },
  components: { HelloWorld },
};
</script>
​
// 子组件  HelloWorld
<template>
  <input class="i911-sync" :value="val" @input="handleInput" />
</template>
<script>
export default {
  name: "HelloWorld",
  props: {
    val: {
      type: String,
      default: "",
    },
  },
  methods: {
    handleInput(event) {
      this.$emit("update:val", event.target.value);
    },
  },
};
</script>

4.、ref

ref通常のDOM要素上にある場合、参照はDOM要素を指します。

子コンポーネント上にある場合、参照は子コンポーネントインスタンスを指し、親コンポーネントは子コンポーネントのプロパティをアクティブに取得するか、refを介して子コンポーネントのメソッドを呼び出すことができます。

// 父组件
<template>
  <div class="">
    <HelloWorld ref="child"></HelloWorld>
  </div>
</template>
<script>
import HelloWorld from "../components/HelloWorld.vue";
export default {
  data() {
    return {};
  },
  mounted() {
    const child = this.$refs.child;
    console.log(child.str); // 获取子组件的方法
    child.fn("调用了子组件的方法");
  },
  components: { HelloWorld },
};
</script>
​
// 子组件
<template>
  <input type="text" />
</template>
<script>
export default {
  data() {
    return {
      str: "我是数据",
    };
  },
  methods: {
    fn(e) {
      console.log(e);
    },
  },
};
</script>

5、$ emit / v-on

カスタムイベントを親コンポーネントの子コンポーネントにバインドし、必要なメソッドを呼び出してから、this。$emitを子コンポーネントで使用して親コンポーネントのイベントをトリガーします。1つ目はイベント名で、2つ目はイベント名です。パラメータ

// 父组件
<template>
  <div class="">
   <!-- v-on 简写 @ -->
    <HelloWorld @fn="fn"></HelloWorld>
  </div>
</template>
<script>
import HelloWorld from "../components/HelloWorld.vue";
export default {
  data() {
    return {};
  },
  mounted() {},
  methods: {
    fn(e) {
      console.log("子传父" + e);
    },
  },
  components: { HelloWorld },
};
</script>
​
// 子组件
<template>
  <input type="text" @blur="fn('我是子组件，可以传参数')" />
</template>
<script>
export default {
  data() {
    return {};
  },
  methods: {
  // 失去焦点发送
    fn(e) {
      this.$emit("fn", e);
    },
  },
};
</script>

6、$ attrs / $ listeners

複数のネストされたコンポーネントがデータを渡す場合、これは、親コンポーネントが孫コンポーネントにデータを渡す場合など、中間処理なしでデータのみが渡される場合に使用できます。

$attrs：クラスとスタイルを除く親スコープの非propsプロパティのセットが含まれます。this。$attrsを介して親スコープ内の修飾された属性のすべてのセットを取得し、それを子コンポーネント内の他のコンポーネントに渡し続けると、v-bind ="$attrs"を渡すことができます。

$listeners：親スコープの.nativeを除くリスニングイベントのコレクションが含まれます。サブコンポーネント内の他のコンポーネントに引き続き渡したい場合は、v-on ="$linteners"を渡すことができます。

使用法は同じです

// 父组件
<template>
  <div class="">
    <HelloWorld :name="name" val="你好s-z-h"></HelloWorld>
  </div>
</template>
<script>
import HelloWorld from "../components/HelloWorld.vue";
export default {
  data() {
    return {
      name: "父组件数据",
    };
  },
  components: { HelloWorld },
};
</script>
// 子组件
<template>
  <div>
    <input type="text" />
     // 孙组件
    <SunChild v-bind="$attrs"></SunChild>
  </div>
</template>
<script>
import SunChild from "./sun-child.vue";
export default {
  data() {
    return {};
  },
  mounted() {
    console.log(this.$attrs); // 可以拿到父组件传来的数据
  },
  components: { SunChild },
};
</script>
// 孙组件
export default {
  mounted() {
    console.log(this.$attrs);
  },
};
​

$listenersは使用します

//parent组件
<template>
    <div>
        <Son @eventOne='eventHandler' @click.native='clickHandler'/>
    </div>
</template>
<script>
    export default {
        methods: {
            eventHandler() {
                console.log('触发了Parent中的eventHandler s-z-h')
            },
            clickHandler() {
                console.log('触发了Parent中的clickHandler')
            }
        }
    }
</script>
​
//Son组件
<template>
    <div>
        //此时Son组件把从父组件传来的监听器，在传给孙组件
        <GrandSon v-on='$listerners'/>
    </div>
</template>
<script>
    export default {
        mounted() {
            //父组件监听了两个事件，一个eventOne， 一个click，由于click被native修饰了，故$listerners 只有eventOne事件
            console.log(this.$listerners) //{eventOne: fn}
            this.$emit('eventOne') //可以触发Parent组件中的eventHandler函数
        }
    }
</script>
​
//GrandSon组件
<template>
    <div>
        这是孙组件
    </div>
</template>
<script>
    export default {
        mounted() {
            //这样孙组件通过emit触发Parent组件中的监听函数  让后代组件触发祖先组件
            console.log(this.$listerners) // {eventOne: fn}
            this.$emit('eventOne') //可以触发Parent组件中的eventHandler函数
        }
    }
</script>

7. $ children /$parentの使用

$children：すべての子コンポーネント（孫コンポーネントを除く）を含むVueComponentオブジェクトの配列を取得します。子コンポーネントのすべてのデータとメソッドを直接取得できます。

$parent：親ノードのVueComponentオブジェクトを取得します。これには、親ノードのすべてのデータとメソッドなども含まれます。

// 父组件
<template>
  <div class="">
    <HelloWorld></HelloWorld>
  </div>
</template>
<script>
import HelloWorld from "../components/HelloWorld.vue";
export default {
  data() {
    return {
      name: "父组件数据",
    };
  },
  mounted() {
    this.$children[0].fn(); // 调用第一个子组件的方法
    console.log(this.$children[0].name); // 获取第一个子组件中的属性
  },
  methods: {
    fn() {
      console.log("父组件里的方法 s-z-h");
    },
  },
  components: { HelloWorld },
};
</script>

// 子组件
<template>
  <div>
    <input type="text" />
  </div>
</template>
<script>
export default {
  data() {
    return {
      name: "我是子里的数据",
    };
  },
  methods: {
    fn() {
      console.log("我是子组件方法");
    },
  },
  mounted() {
    this.$parent.fn(); // 调用父组件的方法
    console.log(this.$parent.name); // 获取父组件中的属性
  },
};
</script>

8.孫と孫の間のコミュニケーションを提供/注入する

提供/注入は依存性注入であり、アプリケーションコードで直接使用することはお勧めしませんが、一部のプラグインやコンポーネントライブラリで一般的に使用されているため、役に立たないと思います。非常に便利です。

provide：子孫コンポーネントに提供するデータまたはメソッドを指定できます

inject：子孫コンポーネントでこのコンポーネントに追加するデータまたはメソッドを受信します。コンポーネントがネストされている深さに関係なく、直接使用できます。

提供と注入によって渡されたデータは応答しません。つまり、注入でデータを受信した後、提供のデータは変更され、子孫コンポーネントのデータは、受信が監視可能なオブジェクト。

// 父组件 Home
 <template>
  <div class="">
    <HelloWorld></HelloWorld>
  </div>
</template>
<script>
import HelloWorld from "../components/HelloWorld.vue";
export default {
  data() {
    return {
      val: "父组件数据",
    };
  },
  provide() {
    return {
      name: this.val, // data 的数据
      someMethod: this.someMethod, // methods 中的方法
    };
  },
  methods: {
    someMethod() {
      console.log("这是注入的方法");
    },
  },
  components: { HelloWorld },
};
</script>
// 子组件 HelloWorld
<template>
  <div>
    <input type="text" />
    <SunChild></SunChild>
  </div>
</template>
<script>
import SunChild from "./sun-child.vue";
export default {
  data() {
    return {};
  },
  inject: ["name", "someMethod"],
  mounted() {
    console.log(this.name);
    this.someMethod();
  },
  components: { SunChild },
};
</script>
// 孙组件SunChild 也可以拿数据
<script>
export default {
  data() {
    return {};
  },
  mounted() {},
  inject: ["name", "someMethod"],
  mounted() {
    console.log(this.name);
    this.someMethod();
  },
};
</script>

9.EventBusグローバルイベントバス

EventBusは中央のイベントバスであり、親子コンポーネント、兄弟コンポーネント、クロスレベルコンポーネントなど、通信を完了することができます。

// 找到main.js 加入一下代码  公共的$bus
Vue.prototype.$bus = new Vue()
// 父组件 也可以兄弟a
<template>
  <div class="">
    <HelloWorld></HelloWorld>
  </div>
</template>
<script>
import HelloWorld from "../components/HelloWorld.vue";
export default {
  data() {
    return {};
  },
  mounted() {
    this.$bus.$on("fn", (value) => {
      console.log(value);
    });
  },
  components: { HelloWorld },
};
</script>
// 子组件 也可以兄弟b
<template>
  <div>
    <input type="text" @blur="fn" />
  </div>
</template>
<script>
export default {
  data() {
    return {};
  },
  methods: {
    fn() {
      this.$bus.$emit("fn", "可以父子通信，也可以兄弟通信,s-z-h");
    },
  },
};
</script>

10、vuex通信，

共有データソースを定義でき、インストール構成にはどこからでもアクセスできます

// vuex 里定义共享的数据，在哪个组件都可以访问
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
import vuexPersist from "vuex-persist";
export default new Vuex.Store({
  state: {
    data: 'vuex 的数据',
    a: 1,
    b: 2,
  },
  mutations: {},
  actions: {},
  modules: {},
  getters: {
    num(state) {
      return state.a + state.b
    }
  },
})
<template>
  <div class="">
    {
   
   { data }}
    {
   
   { num }}
  </div>
</template>
<script>
import { mapState, mapGetters } from "vuex";
export default {
  data() {
    return {};
  },
  // 辅助函数
  computed: { ...mapState(["data"]), ...mapGetters(["num"]) },
  // 第二种 希望你会举一反三
  // computed: {
  //   data() {
  //     return this.$store.state.data;
  //   },
  // },
  components: {},
};
</script>

11.名前付きスロット+スコープ付きスロットスロット

  1. 名前付きスロットは、親コンポーネントのスロット属性を介して名前が付けられ、子コンポーネントのスロットラベルを介して定義された名前に従って対応する位置に入力されます。

  2. スコープスロットはデータを含むスロットです。子コンポーネントは親コンポーネントにパラメータを提供します。親コンポーネントは、子コンポーネントから渡されたスロットデータに応じて、コンテンツを異なる方法で表示および入力します。v-slot="value"のタグでデータを受信します。

// 父组件
<template>
  <div class="">
    <HelloWorld>
      <template v-slot:a="value">
        <h2>{
   
   { name }}</h2> // 这个是具名插槽
         <!--  value 是子组件传过来的数据 -->
        <h2>{
   
   { value.value }}</h2> // 这个是作用域插槽
      </template>
    </HelloWorld>
  </div>
</template>
<script>
import HelloWorld from "../components/HelloWorld.vue";
export default {
  data() {
    return {
      name: "具名插槽 slot插槽传数据 父传子",
    };
  },
  components: { HelloWorld },
};
</script>


// 子组件
<template>
  <div>
    <slot name="a" :value="value"></slot>
  </div>
</template>
<script>
export default {
  data() {
    return {
      value: "我是子组件数据 作用域插槽子传父 s-z-h",
    };
  },
  methods: {},
};
</script>

12、$ root

$rootApp.vueでデータとメソッドを取得できます

// HelloWorld 子组件添加数据
<template>
  <div></div>
</template>
<script>
export default {
  data() {
    return {};
  },
  mounted() {
    // 写入根组件的数据
    this.$root.foo = 2;
  },
  methods: {},
};
</script>

// Home 父组件访问数据
<template>
  <div class="">
    <HelloWorld></HelloWorld>
  </div>
</template>
<script>
import HelloWorld from "../components/HelloWorld.vue";
export default {
    data() {
        return {};
    },
    mounted() {
        // 获取根组件的数据
        console.log(this.$root.foo);
    },
    components: { HelloWorld }
};
</script>

szhプロデュース

おすすめ

転載: blog.csdn.net/qq_54753561/article/details/122281196
おすすめ
ランキング
[データベース] H2 DateBaseの使用を拡大します
この世界を行い、あなたは人々が軽蔑与えます
2109-Docker课上问题总结
nuxコマンドの概要sedコマンドの詳細な説明
関係図、資本図の開発
ログアウトし、すべて閉じブラウザ/タブを閉じます
プログラミングの基礎再テストアサルト
Camera Calibration in Computer Vision Algorithms
人工知能: あなたのための未来の仕事
検証メソッドpublic抽象...異常原因と解決のためのクエリに失敗しました：JavaのJPAは、java.lang.IllegalArgumentExceptionが報告しました
アーカイブ
もっと
2024-05-02(0)
2024-05-01(4)
2024-04-30(35)
2024-04-29(5)
2024-04-28(12)
2024-04-27(29)
2024-04-26(22)
2024-04-25(31)
2024-04-24(30)
2024-04-23(31)

コードワールド

© 2018 codetd.com