目次
3. サブコンポーネント (兄弟コンポーネント) 間の値の転送
4. ネストされたレイヤーの数に関係なく、子コンポーネントは親コンポーネントのデータを直接取得します。
vue コンポーネント間で受け渡される値
-
1. 親コンポーネントが子コンポーネントに値を渡す
方法 1
親コンポーネント
<template>
<First :poem="poem" type="诗词歌赋" />
</template>サブアセンブリ
export default{
props:["poem","type"]
}方法2
親コンポーネントのデータを子コンポーネントで直接取得します。
mounted(){
this.len = this.$parent.poems.length;
}2. サブコンポーネントは親コンポーネントに値を渡します
方法 1
サブアセンブリ
methods:{
addAuthor(){
let obj={
id:this.poem.id,
author:this.author
}
// this.$emit(自定义事件类型，参数)
this.$emit('aa',obj);
}
}親コンポーネント
<template>
<First @aa="addWriter" />
</template>方法2
親コンポーネントで $refs を使用して子コンポーネントの値を取得します
<template>
<First ref="first" />
<AA ref="aa"/>
</template>
mounted(){
// $refs当前this的子组件
console.log(this.$refs);
let sum = 0;
this.$refs.first.forEach(v=>{
sum+=v.count;
})
sum+=this.$refs.aa.count;
this.count=sum;
},3. 任意のコンポーネント間で値を渡す (兄弟コンポーネントに使用可能)
(1) main.jsでpublic vueプロトタイプを作成する
Vue.prototype.$EventBus = new Vue()兄弟一要素
methods:{
addAuthor(){
// 发射事件 EventBus
this.$EventBus.$emit("eb",this.poem.id);
}
}兄弟の2つの要素
mounted(){
// 实现 EventBus 的事件
this.$EventBus.$on("eb",id=>{
console.log("id === "+id);
})
}4. ネストされたレイヤーの数に関係なく、サブコンポーネントはルート コンポーネントのデータを直接取得します。
mounted(){
console.log(this.root);
}