ホームページ > ウェブフロントエンド > Vue.js > vue2.0コンポーネント間で値を転送するにはどうすればよいですか?コンポーネントの伝送方法の簡単な分析

vue2.0コンポーネント間で値を転送するにはどうすればよいですか?コンポーネントの伝送方法の簡単な分析

青灯夜游
リリース: 2022-07-05 16:32:45
転載
1877 人が閲覧しました

vueコンポーネント間で値を転送するにはどうすればよいですか? vue2.0でのコンポーネント送信方法については以下の記事で紹介していますので、ご参考になれば幸いです!

vue2.0コンポーネント間で値を転送するにはどうすればよいですか?コンポーネントの伝送方法の簡単な分析

コンポーネントベースの開発は VUE の重要な開発手法ですが、各コンポーネントを個別に開発すると、コンポーネント間の値の転送の問題が必然的に発生します。 (学習ビデオ共有: vuejs ビデオ チュートリアル)

props は prop 値を渡します

props渡される値は親との間で行われます値を間接的に渡す最も一般的な方法は、サブコンポーネントに転送したいデータを追加し、サブコンポーネントを参照するときに props を通じてデータを取得することです。

Parent.vue
<child :child-data = "childData"></child>

Child.vue
export default {
    // 数组写法
    props: ["child-data"];
    
    // 对象写法
    props: {
        child-data: {
            type: String,
            require: true, // 是否必须
            default: "默认值", // 设置默认值
            validator(val) {
                return true;
            }, // 设置值的 验证 ,验证该值是否符合(true)
        }
    }
}
ログイン後にコピー

props を使用して、親コンポーネントが子コンポーネントにデータを渡す処理を完了すると、この場合、子コンポーネントが親コンポーネントから取得したデータは処理できません。 #Change の場合、送信された値を変更するには $emit を使用する必要があります。

$emit は prop を変更する値を渡します

#props$emit と組み合わせて使用​​すると、親コンポーネントと子コンポーネント間の通信 値による受け渡しとは、子コンポーネント $emit が親コンポーネントのイベントを処理し、子コンポーネントが親コンポーネント内のデータを変更し、値を親コンポーネントに渡すことができるようにすることを意味します。 。

Parent.vue
<child :child-data = "childData" @change-child="changeChild"></child>
methods: {
    changeChild(val) {
        console.log(val); // 子组件传递过来的更改了的新值
        this.childData = val;
    }
}

Child.vue
methods: {
    handleChildData() {
        this.$emit("change-child", new-child-data);
    }
}
ログイン後にコピー

props だけでなく、model 構文 Sugar を使用して親コンポーネントと子コンポーネント間の値の転送を実現します。このような値の転送方法は特に面倒で、多大なご迷惑をおかけします。

v-model はプロパティ値を渡します

model特定の値を $emit by value## に置き換えることができます#親コンポーネントと子コンポーネント間の値の転送を完了します。書き込み方法が少し異なります。 <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">Parent.vue &lt;child v-model = &quot;childData&quot;&gt;&lt;/child&gt; Child.vue export default {     props: [&quot;value&quot;], // value     methods: {         handleChildData() {             this.$emit(&quot;input&quot;, new-child-data);         }     } }</pre><div class="contentsignin">ログイン後にコピー</div></div>

model

を定義して値を渡すこともできます (データを取得するために props を使用する必要はありません)。 <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">Parent.vue &lt;child v-model = &quot;childData&quot;&gt;&lt;/child&gt; Child.vue export default {     model: {         prop: &quot;child-data&quot;, // 重新取名         event: &quot;change-child-data&quot;,     },     methods: {         handleChildData() {             this.$emit(&quot;change-child-data&quot;, new-child-data);         }     } }</pre><div class="contentsignin">ログイン後にコピー</div></div>ただし、

v-model

prop を 1 つしか扱えず、複数の prop を扱いたい場合は使用できません。

.sync は、

Parent.vue
<child :child-data.sync = "childData"></child>

Child.vue
export default {
    props: ["child-data"],
    methods: {
        handleChildData() {
            this.$emit("update:child-data", new-child-data);
        }
    }
}
ログイン後にコピー

を渡すマルチプロパティ値を実装します。ただし、VUE3 では、
sync

を使用する必要がなくなりました。 v-model は、複数の prop に渡された値をサポートします。

prop

を使用して値を渡すだけでなく、ref を使用してコンポーネントをポイントし、サブコンポーネント内のプロパティまたはメソッドを取得することもできます。

ref サブコンポーネント呼び出し

は、コンポーネント内のプロパティまたはメソッドを呼び出すことで取得できる

ref

を通じてコン​​ポーネントを指します。 <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">Parent.vue &lt;child ref=&quot;child&quot;&gt;&lt;/child&gt; export default {     mounted() {         const child = this.$refs.child;         console.log(child.childData);         child.handleChild(&quot;handle-child-data&quot;);     } } Child.vue export default {     data() {         return {             childData: &quot;child-data&quot;,         }     },     methods: {         handleChild(val) {             console.log(val);         }     } }</pre><div class="contentsignin">ログイン後にコピー</div></div>

ref

を使用して子コンポーネント データを取得できるだけでなく、children&parent も使用できます。親子コンポーネントからデータを渡します。

$children & $parent##$children

は親コンポーネントを取得できます。操作するサブコンポーネント内のプロパティまたはメソッドを取得できるすべてのサブコンポーネント。

$parent

親コンポーネント (オブジェクト) を取得して呼び出すことができます。

Parent.vue
this.$children[0].handleChild("change-child[0]-data");

Child.vue
this.$parent.handleParent("change-parent-data");
ログイン後にコピー
ただし、最初のいくつかのメソッド (prop & ref) は、親コンポーネントと子コンポーネント間の値の転送のみを実現でき、親コンポーネントと多層ネストされたコンポーネント間の通信を完了できません。値渡しを実装した場合、コードの冗長性が生じ、再利用性が非常に低くなり、非常に面倒になります。

他のメソッド (

attrs&listeners、provide&inject、eventBus) を使用して、多層のネストされたコンポーネントと親コンポーネントの間の接続を実現できます。渡された値。

$attrs

& $listeners$attrs

受信データが含まれます。孫コンポーネント (

prop に渡されたプロパティ、classstyle を除く)。パス v-bind="$attrs は、孫コンポーネントに渡すことができます。$listeners

には、親コンポーネントのすべての

v-on## が含まれます#Events (.native デコレータを含むイベントを除く) v-on="$listeners を通じて、親コンポーネントのメソッドを孫コンポーネントに渡します。 <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">&lt;sun-child v-bind=&quot;$attrs&quot; v-on=&quot;$listeners&quot;&gt;&lt;/sun-child&gt;</pre><div class="contentsignin">ログイン後にコピー</div></div>provide & inject

provide必要なデータまたはメソッドを子孫コンポーネントに提供できます (ネストされたコンポーネントのレベルに関係なく)。

inject任意の親コンポーネントで提供されるデータまたはメソッドを取得して、それらを直接使用できます。

Parent.vue
provide() {
    return {
        parent-data: "parent-data",
        handleParent: this.handleParent,
    }
},
methods: {
    handleParent() {},
}

Sun-Child.vue
inject: ["parent-data", handleParent"],
ログイン後にコピー

但是provide & inject是不可控的,因为这个里面传递的数据并不是响应式的(其中一个数据改变,并不会影响另外的),当某个嵌套组件使用某个传输的值的时候并不能追溯到是哪个父组件,所以,这种方式并不是特别可取。

eventBus 中央事件总线

eventBus,顾名思义,中央事件总线,可以通过其实现各个层套的组件之间的传值,包括兄弟组件。

我们可以通过将其抽离出来成一个单独的js文件(Bus.js),挂载到全局(Vue.prototype.$bus)或者按需引入,又或者是存入到根对象的data上。

// 以按需引入的情况为例
import Bus from 'Bus.js'

Bus.$emit("handleBus", "自定义事件"); // 向外部传递数据

Bus.$on("handleBus", data => {}); // 触发事件,获取数据

Bus.$off("handleBus"); // 取消对自定义事件的监听
ログイン後にコピー

但是这些方法也只是适用于小范围内的数据使用较少的组件中,需要传递的数据过多的话,维护会很麻烦,且可复用性也极低。当数据传递量大的时候,建议使用vuex状态管理器常用)。

Tips

其实也可以通过插槽进行父子组件的值传递,不过插槽的作用不止如此,但是如果有遇到使用插槽更方便的情况的时候可以使用插槽slot

【相关视频教程推荐:web前端

以上がvue2.0コンポーネント間で値を転送するにはどうすればよいですか?コンポーネントの伝送方法の簡単な分析の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル:
ソース:juejin.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート