内容简介:
由于父子组件不能直接引用对方数据
所以通过以下两种方式实现父子组件相互之间的通信
1.通过props属性实现父组件向子组件传递数据
2.通过$emit事件实现子组件向父组件传递数据
详细内容:
一、父子组件之间通信
1.通过props属性实现父组件向子组件传递数据(父传子)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>组件通信-父传子</title>
</head>
<body>
<!--父组件模板-->
<div id="app">
<cpn v-bind:cmessage="message"></cpn><!--将父组件的message变量传给子组件-->
</div>
<!--子组件模板-->
<template id="cpn">
<div>
<h2>{{cmessage}}</h2>
</div>
</template>
<script src='../js/vue.js'></script>
<script>
// 子组件
const cpn={
template:`#cpn`,
props:{
cmessage:String // 在子组件的props属性中申明一个变量,用于接收父组件传递过来的参数
}
}
//父组件
const app = new Vue({
el: '#app',
data: {
message: 'hello world!'
},
components:{
cpn
}
})
</script>
</body>
</html>
2.通过$emit事件实现子组件向父组件传递数据(子传父)
<!--父组件模板-->
<div id="app">
<!--cpnClick方法后面可以省略参数,系统会默认传过去-->
<cpn v-on:itemclick="cpnClick"></cpn><!--监听子组件发射出来的事件“itemClikc”,如果有事件发生则执行cpnClick方法-->
</div>
<!--子组件模板-->
<template id="cpn">
<div>
<button v-for="item in categories" v-on:click="btnClick(item)"> <!--按钮监听,当发生点击事件时,执行btnClick方法,并将当前item作为参数传递过去-->
{{item.name}}
</button><br>
</div>
</template>
<script src="../js/vue.js"></script>
<script>
//1.子组件
const cpn={
template:`#cpn`,
data(){
return{
categories:[/*这样的数据第一次见吧*/
{id:'aaa',name:'热门推荐'},
{id:'bbb',name:'手机数码'},
{id:'ccc',name:'家用家电'},
{id:'ddd',name:'电脑办公'},
],
}
},
methods:{
btnClick(item){/*将发生点击事件的item数据传给父组件*/
console.log(item.name);
//自定义一个itemclick事件 emit:发射的意思
this.$emit('itemclick',item)/*itemClick是发射事件名称 item是发射事件时同时传递的参数*/
}
}
}
//2.父组件
const app = new Vue({
el:'#app',
data:{
message:'你好啊'
},
components:{
cpn
},
methods:{
cpnClick(item){/*定义一个item变量用于接收子组件传来的数据*/
console.log(item);
}
}
})
</script>
运行效果图:
二、组件访问
组件之间可以相互访问内部方法和变量等内容
父组件访问子组件:
- this.$children(实际开发中用的比较少)
console.log(this.$children[0].name) 在父组件中访问子组件的一个变量
- this.$refs(常用)
<cpn ref="aaa"></cpn>
console.log(this.$refs.aaa.name)
在父组件中访问子组件的一个变量,“aaa”可以帮助定位到具体子组件
组件标签使用过程中需要加上 ref="aaa"
子组件访问父组件和根组件:
- this.$parent
console.log(this.$parent.name); 访问父组件中的name变量
- this.$root
console.log(this.$root.message); 访问根组件(也就是vue实例)中的message变量
三、插槽的基本使用
组件的插槽:
- 组件的插槽是为了让我们封装组件更加具有扩展性
- 可以灵活决定组件内部一些细小部位的内容
- 基本使用:通过在组件模板中添加标签,来预留插槽位置
- 在标签中间添加内容可以设定为插槽的默认值
- 组件中如果了预留多个插槽,可以通过具名插槽来识别具体是哪个插槽
基本使用:
<div id="app"><!--父组件模板-->
<cpn><button>按钮</button></cpn>
<cpn><input type="text"></cpn>
<cpn><span>哈哈哈</span></cpn>
<cpn></cpn>
</div>
<template id="cpn"><!--子组件模板-->
<div>
<h2>我是组件</h2>
<slot></slot><!--预留一个插槽-->
</div>
</template>
具名插槽:
<div id="app"> <!--父组件模板-->
<cpn><span slot="center">标题</span></cpn><!--插入到name="center"的插槽位置-->
</div>
<template id="cpn"><!--子组件模板-->
<div>
<slot name="left"><span>左边</span></slot>
<slot name="center"><span>中间</span></slot>
<slot name="right"><span>右边</span></slot>
</div>
</template>
运行效果图:
参考说明:
内容根据B站coderwhy老师视频2019年coderwhy vue-vuejs从入门到精通教程整理记录