ホームページ > 記事 > ウェブフロントエンド > vue2.0コンポーネント間で値を転送するにはどうすればよいですか?コンポーネントの伝送方法の簡単な分析
vue2.0コンポーネント間で値を転送するにはどうすればよいですか?コンポーネントの伝送方法の簡単な分析
- 青灯夜游転載
- 2022-07-05 16:21:471818ブラウズ
vueコンポーネント間で値を転送するにはどうすればよいですか? 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## に置き換えることができます#親コンポーネントと子コンポーネント間の値の転送を完了します。書き込み方法が少し異なります。 <pre class="brush:php;toolbar:false">Parent.vue
<child v-model = "childData"></child>
Child.vue
export default {
props: ["value"], // value
methods: {
handleChildData() {
this.$emit("input", new-child-data);
}
}
}</pre>
を定義して値を渡すこともできます (データを取得するために props を使用する必要はありません)。 <pre class="brush:php;toolbar:false">Parent.vue
<child v-model = "childData"></child>
Child.vue
export default {
model: {
prop: "child-data", // 重新取名
event: "change-child-data",
},
methods: {
handleChildData() {
this.$emit("change-child-data", new-child-data);
}
}
}</pre>ただし、
は prop を 1 つしか扱えず、複数の prop を扱いたい場合は使用できません。
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 では、syncpropを使用する必要がなくなりました。
v-modelは、複数のpropに渡された値をサポートします。
を使用して値を渡すだけでなく、ref を使用してコンポーネントをポイントし、サブコンポーネント内のプロパティまたはメソッドを取得することもできます。
は、コンポーネント内のプロパティまたはメソッドを呼び出すことで取得できる
ref を通じてコンポーネントを指します。 <pre class="brush:php;toolbar:false">Parent.vue
<child ref="child"></child>
export default {
mounted() {
const child = this.$refs.child;
console.log(child.childData);
child.handleChild("handle-child-data");
}
}
Child.vue
export default {
data() {
return {
childData: "child-data",
}
},
methods: {
handleChild(val) {
console.log(val);
}
}
}</pre>
を使用して子コンポーネント データを取得できるだけでなく、children&parent も使用できます。親子コンポーネントからデータを渡します。
$children & $parent
は親コンポーネントを取得できます。操作するサブコンポーネント内のプロパティまたはメソッドを取得できるすべてのサブコンポーネント。 $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
受信データが含まれます。孫コンポーネント (prop に渡されたプロパティ、class、style を除く)。パス v-bind="$attrs は、孫コンポーネントに渡すことができます。$listeners
v-on## が含まれます#Events (.native デコレータを含むイベントを除く) v-on="$listeners を通じて、親コンポーネントのメソッドを孫コンポーネントに渡します。 <pre class="brush:php;toolbar:false"><sun-child v-bind="$attrs" v-on="$listeners"></sun-child></pre>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 サイトの他の関連記事を参照してください。