标题:父子组件传值,非父子组件传值,作用域插槽:
个人价值观: 我们现在不谈技术,不谈bug,就谈人生价值观,从小我就喜欢学习钻研一些东西,将摩托车拆掉(肯定是装不起来的),将冰箱锤烂(目的是向看看里面到底是什么组成的),到了大学,不知道怎么滴就不爱学习了,到处乱逛,期末排名成绩一把索到了倒数可以用手指头抠明白的名次,毕业之后危机慢慢降临,俗话说不是不报,时候未到,用歇斯底里的最后一口气将自己从地狱拯救出来,接触了前端开发,一根生死绳,慢慢地往上爬,相信终将有所收获,致一起死磕在前端道路上的朋友,谢谢
1.父组件向子组件传值:
父组件代码:
<template>
<div>
<child @sendiptVal="getVal" name1="张三" name2="李四"></child>
</div>
</template>
<script>
//导入子组件
import child from './child1.vue';
export default {
//注册子组件
components:{
child,
},
//获取子组件传递过来的值
methods: {
getVal(val){
console.log(val);
}
},
}
</script>
子组件代码:
<template>
<div>
<h1>{{name1}}</h1>
<h3>{{name2}}</h3>
<button @click='subParent()'>提交数据给父组件</button>
</div>
</template>
<script>
export default {
//子组件接收父组件传递的参数,可以写成数组的形式也可以写成对象的形式
// props:['name1','name2'],
props:{
name1:String,
name2:String,
},
data(){
return {
inputValue:'儿子组件:我是值'
}
},
//向父元素传递值
methods: {
subParent(){
this.$emit("sendiptVal", this.inputValue)
}
},
}
</script>
效果
2.非父子组件之间传值:
2.1.公共bus.js 实例Vue
//非父子组件之间传值使用的中间件
import Vue from 'vue'
export default new Vue()
2.2.组件1
<template>
<div style="background-color:red;">
这是组件1
<button @click="sendValue">传值给组件2</button>
</div>
</template>
<script>
import bus from './bus.js'
export default {
methods:{
sendValue(){
// 使用公共的bus传值
bus.$emit('event1',{name:'小明',age:25})
}
}
}
</script>
组件2:
<template>
<div style="background-color:green;">
这是组件2
</div>
</template>
<script>
import bus from './bus.js'
export default {
mounted(){
//监听事件
/**
* 参数1:自定义事件名称
* 参数2:回调函数
*/
bus.$on('event1',data=>{
console.log("----组件2----")
console.log(data)
})
}
}
</script>
公共展示组件:
<template>
<div>
<child1></child1>
<child2></child2>
</div>
</template>
<script>
//导入两个非父子组件
import child1 from './child2.vue';
import child2 from './child3.vue';
export default {
//注册组件
components:{
child1,
child2,
},
}
</script>
效果
3.作用域插槽
子组件:
<template>
<div>
<li v-for="todo in todos" :key="todo.id">
<!--获取父组件传递过来的数据 同时向父组件传值-->
{{todo.text}}
<slot :aa="todo" cc="我是子组件"></slot>
</li>
</div>
</template>
<script>
export default {
//规定传递过来的类型
props:{
todos:Array
}
}
</script>
父组件:
<template>
<div>
<h1>我是父亲</h1>
<!--作用域插槽-->
<toDo :todos="todos">
<template slot-scope="bbb">
<div>
<!--接收子组件传递过来数据 这就可以为所欲为了-->
<span v-if="bbb.aa.id==1">我是吃饭</span>
<span v-else-if="bbb.aa.id==2">我是睡觉</span>
<span v-else="bbb.aa.id==3">我是做梦</span>
</div>
</template>
</toDo>
</div>
</template>
<script>
//导入子组件
import toDo from './toDo';
export default {
//注册子组件
components:{
toDo
},
data(){
return {
//绑定传递数据
todos:[
{id:1,text:'吃饭'},
{id:2,text:'睡觉'},
{id:3,text:'做梦'}
]
}
}
}
</script>
效果
总结: 根据接口条件使用不同的获取跨域请求数据,灵活使用,相信自己享受技术