★组件嵌套 全局组件的嵌套 局部组件的嵌套
父子组件 全局组件的父子关系是根据使用来决定的
.png)
全局组件嵌套
父子组件传参（父-->子）
1.需要在子组件配置里声明一个props,用来抛出一个自定义的标签属性
2.子组件 利用这个抛出的 标签属性来 绑定 父组件的数据。达到父控子的效果
//有两个组件father son 通过father组件里的按钮操作控制son组件里的div的显示和隐藏
<div id="contain">
<father></father> //使用
</div>
<template id="father"> //father组件模板
<div>
father{{fhide}}
<button @click="show">show/hide_fa</button> //点按钮控制子组件的div显示隐藏
<hr />
<son :pop='fhide'></son> //fhide是变量 要用 :pop
</div>
</template>
<template id="son"> //son组件模板
<div>
son{{pop}}
<div class="show"
v-if="pop"></div> //这里v-if绑定的是自定义的pop
</div>
</template>
<script>
Vue.component("father",{
template:'#father',
data(){ return { fhide:true } },
methods:{
show(){ this.fhide=!this.fhide }
}
});
Vue.component("son",{
template:'#son',
data(){ return { } },
methods:{ },
props:['pop'] //这里声明pop自定义标签属性
});
new Vue({
el:"#contain",
})
父子组件传参（子-->父）
//有两个组件father son 通过子组件son里的按钮操作控制父组件father里的div的显示和隐藏
在子组件上创建一个自定义
方法，
v-on:自定义方法名 父组件的处理函数
这个自定义方法的处理函数是父组件里的方法，
由
子组件触发
这个方法 this.$emit('自定义方法的名字'，[可选参数])
<div id="contain">
<father></father>
</div>
<template id="father">
<div>
father
<button @click="show">show/hide</button> //这里是可以调用本组件的方法
<div class="show" v-if="showState"></div> //绑定值
<hr />
<son @test='show'></son> //
① @test 是自定义方法 处理函数show是father的
</div>
</template>
<template id="son">
<div>
son
<button @click="sclick">show/hide</button> //
③ 调用本组件的方法sclick </div>
</template>
<script>
Vue.component("father",{
template:'#father',
data(){ return { showState:true } },
methods:{
show(){this.showState=!this.showState},
//
②
}
});
Vue.component("son",{
template:'#son',
data(){ return { } },
methods:{
sclick
(){
this.$emit('test'
)
} //
④ sclick方法触发test方法 this.$emit(test)
},
});
new Vue({
el:"#contain",
})
------------
this.$emit('test','han','丽丽') 也可以传参,参数不限
...show(val1,val2){
console.log(val1); //han
console.log(val2); //丽丽
this.showState=!this.showState}
兄弟传参：
亲兄弟传参 套的比较近，通过共有的父元素；嵌套的太深的话就不要用父元素了
组件ab 亲兄弟 组件a里的按钮 可以 控制组件b 里div的显示隐藏
//原理：结合父子传参与子父传参 寻找公有组件
//I,II,III是子父 ①-④ 是父子
<div id="contain">
这里vue实例的{{state}} <!-- vue 的 -->
<hr />
<old @custom='custom'></old> <!-- ① 自定义事件 触发的事件属于他的父亲即vue -->
<hr />
<young :test='state'></young> <!--II将state传给young组件-->
</div>
<template id="old">
<div>
old_borther
<button @click="emit">触发事件</button> <!--③ 在本组件里写一个方法emit 用来触发那个自定义事件-->
</div>
</template>
<template id="young">
<div>
young_borther {{test}} <!--III这时便能使用了 这里绑定的值时父组件的值-->
</div>
</template>
<script>
Vue.component("old",{
template:'#old',
data(){ return { } },
methods:{
emit(){ //④ 触发那个自定义事件
this.$emit('custom'); }
}
});
Vue.component("young",{
template:'#young',
data(){ return { } },
methods:{ },
props:['test'] // I 抛出标签属性
});
new Vue({ //在本案例中相当于桥梁
el:"#contain",
data:{
state:true //改变你
},
methods:{
custom(){ //② 触发事件的执行函数
this.state=!this.state
}
}
})
//当点击子组件按钮时，改变父组件的值，而父组件的值又使另一个子组件的值改变，这样就达到了兄弟组件的传参
.png)
非亲兄弟传参 也可以用上方法 但是麻烦 可以用第三方实例
1.创建一个空的vue实例
2.为vue实例绑定一个方法
3.只要能获取到这个vue实例 不管在什么地方都能通过 $emit()来触发绑定事件
重点是在 调用的是 要修改数据的组件内部的一个方法
-------------------------------------------
<div id="app">
<father></father>
</div>
<template id="f1">
<div >
{{name}}
<hr />
<s1></s1>
<hr />
<s2></s2>
</div>
</template>
<template id="s1">
<div >
{{name}}
<button @click="sclick">click</button>
</div>
</template>
<template id="s2">
<div >
{{name}}
</div>
</template>
<script>
let angle=new Vue(); //仅创建一个空的Vue充当桥梁，不需要配置项
new Vue({
el:'#app',
data:{ },
components:{
father:{
template:"#f1",
data(){
return{ name:'我是父组件' }
},
components:{
s1:{ template:"#s1",
data(){
return{ name:"我是子组件1" }
},
methods:{
sclick(){
console.log('这是s1的方法');
angle.$emit('test') //触发 在能获得angle的地都能调用
}
}
},
s2:{ template:"#s2",
data(){
return{ name:"我是子组件2" }
},
methods:{
custom(){
console.log('我是s2的自定义方法')
this.name='相良'
}
},
mounted(){//生命周期 挂载完成后
angle.$on('test',this.custom)
}
}
}
}
}
})