1. 透明伝送とは
透過的送信は通信レベルの概念であり、通信中に送信されるビジネス コンテンツに関係なく、ビジネス データの内容を変更することなく、送信されたコンテンツを送信元アドレスから宛先アドレスに転送することだけを担当します。
vue2 では、コンポーネントは深くネストされたシナリオを持っています。たとえば、ビジネスで提供されたデータを
A -> B -> C
取り込みA、それらをレイヤーごとに渡します。転送のプロセスには、通常 2 つのオプションがあります:
- 名前で受け取り
props、继续次に内层渡します - 変数
$listenersと連携して一括透過送信することで$attrsv-onv-bind
2. 属性透過送信: v-bind="$attrs"& イベント透過送信:v-on="$listeners"
<template>
<div>
<p @click="click()">CT</p>
<p>{
{ a }} - {
{ c }}</p>
</div>
</template>
<script>
export default {
name: "CT",
props: {
a: {
type: String,
default: "",
},
c: {
type: String,
default: "",
},
},
data() {
return {
};
},
methods: {
click() {
this.$emit("click");
},
},
};
</script>
<template>
<div>
<p>BT</p>
<CT v-bind="$attrs" v-on="$listeners"></CT>
</div>
</template>
<script>
import CT from "./CT.vue";
export default {
name: "BT",
components: {
CT },
data() {
return {
};
},
methods: {
click() {
this.$emit("click");
},
},
};
</script>
<template>
<div>
<p>AT</p>
<BT a="b" c="t" @click="click()"></BT>
</div>
</template>
<script>
import BT from "./BT.vue";
export default {
name: "AT",
components: {
BT },
data() {
return {
};
},
methods: {
click() {
console.log("AT");
},
},
};
</script>
A -> B -> C
v-bind="$attrs"呼び出しをA组件指定されたものB组件にバインドします属性全部透传C组件v-on="$listeners"呼び出しをA组件指定されたものB组件にバインドします事件全部透传C组件
こうして、受け継がれるもの、受け継がれて
A组件いくもの。想要C组件属性事件
3. 属性の範囲
<template>
<div>
<p @click="click()">CT</p>
<p>{
{ a }} - {
{ c }}</p>
</div>
</template>
<script>
export default {
name: "CT",
props: {
a: {
type: String,
default: "",
},
c: {
type: String,
default: "",
},
},
data() {
return {
};
},
methods: {
click() {
this.$emit("click");
},
},
};
</script>
<template>
<div>
<p>BT</p>
<CT c="cc" v-bind="$attrs" v-on="$listeners" a="aa"></CT>
</div>
</template>
<script>
import CT from "./CT.vue";
export default {
name: "BT",
components: {
CT },
data() {
return {
};
},
methods: {
click() {
this.$emit("click");
},
},
};
</script>
結果：
AT
BT
CT
aa - cc
属性の位置が is
v-bind前または is であってもv-bind后、属性はその属性にバインド具名属性されます。覆盖v-bind同名
4. イベントのマージ
<template>
<div>
<p @click="click()">CT</p>
<p>{
{ a }} - {
{ c }}</p>
</div>
</template>
<script>
export default {
name: "CT",
props: {
a: {
type: String,
default: "",
},
c: {
type: String,
default: "",
},
},
data() {
return {
};
},
methods: {
click() {
this.$emit("click");
},
},
};
</script>
<template>
<div>
<p>BT</p>
<CT c="cc" v-bind="$attrs" v-on="$listeners" a="aa" @click="clickBT()"></CT>
</div>
</template>
<script>
import CT from "./CT.vue";
export default {
name: "BT",
components: {
CT },
data() {
return {
};
},
methods: {
click() {
this.$emit("click");
},
clickBT() {
console.log("clickBT")
}
},
};
</script>
コンソールをクリックするCTと:console输出
clickBT BT.vue?ec36:22
AT AT.vue?b678:19
同名事件合并一緒に実行され都会被执行、最初に実行され具名方法、次にv-on内部で実行されます绑定的同名方法。
5. イベントをマージせずに上書きする方法
<template>
<div>
<p @click="click()">CT</p>
<p>{
{ a }} - {
{ c }}</p>
</div>
</template>
<script>
export default {
name: "CT",
props: {
a: {
type: String,
default: "",
},
c: {
type: String,
default: "",
},
},
data() {
return {
};
},
methods: {
click() {
this.$emit("click");
},
},
};
</script>
<template>
<div>
<p>BT</p>
<CT c="cc" v-bind="$attrs" v-on="{...$listeners, click: clickBT}" a="aa"></CT>
</div>
</template>
<script>
import CT from "./CT.vue";
export default {
name: "BT",
components: {
CT },
data() {
return {
};
},
methods: {
click() {
this.$emit("click");
},
clickBT() {
console.log("clickBT")
}
},
};
</script>
コンソールをクリックするCTと:console输出
clickBT BT.vue?ec36:22
AT AT.vue?b678:19
を使用して扩展运算符実行できます覆盖事件。不做合并
6、v-bind="$attrs"& はv-on="$listeners"絶対的なものではありません
$attrs内置变量これはを参照するvue であり调用本组件时上面绑定的属性、を参照する$listenersvue でもあります。背中は である必要はありません、背中は である必要はありません。次のようにすることができます: 、、、内置变量调用本组件时上面绑定的事件
v-bind$attrsv-on$listeners
v-bind="$props"v-bind="xxx"v-bind="{a: 1, b: 2}"v-listeners="xxx"