Vue 2.x 父子组件之间的通信
在Vue的世界里,爹和儿子之间的沟通是不是也想现实世界里一样呢?
·
在Vue的世界里,爹和儿子之间的沟通是不是也像现实世界里一样呢?
先创建一个父子组件关系
<div id="father">
<h1>{{name}}</h1>
<son></son>
</div>
<template id="son">
<h2>{{name}}</h2>
</template>
const son = {
template:"#son",
data() {
return {
name:'我是你儿子',
job:'coder'
}
}
}
const father = new Vue({
el:"#father",
data:{
name:'我是你爹',
asset:{
house:'180平方米',
car:'顶配小刀电动车',
money:'50块钱'
}
components:{
son,
}
})
打印到页面上
父传子
-
通过props:{}
-
父组件把子组件要用的数据放到data里面,也就是说,父组件不用做任何改变
子组件这样写
- props里面存放父组件传过来的数据
- formFatherData是儿子把爹传过来的东西重新起了个名字
- 待会儿子用的时候,就用这个新的名字
- formFatherData里面的type是说,儿子只要对象数据类型
const son = {
template:"#son",
data() {
return {
name:'我是你儿子',
job:'coder'
}
},
props:{
formFatherData:{
type:Object
}
}
}
儿子使用爹传过来的数据
- 可以看到,儿子用的时候确实用的是自己重新起的名字
<template id="son">
<div>
<h2>{{name}}</h2>
<p v-for="item in formFatherData">{{item}}</p>
</div>
</template>
最重要的一步
- 爹决定传什么东西给儿子
- 在爹的地盘上使用儿子标签,标签属性不能用驼峰命名
- asset就是爹决定传给儿子的数据
<div id="father">
<h1>{{name}}</h1>
<son :form-father-data='asset'></son>
</div>
看一下打印在页面上的效果
儿子用爹的数据的时候,还能提一点小要求
- 基础类型检查(‘null’ 匹配任何类型)
// 属性名:Number
car: String
// null 匹配任何类型
- 多个可能的类型
// 属性名:[类型,类型]
car:[String,Number]
- required的值为true是说明该项必填
属性名:{
type:属性类型,
require:true
}
- 设置默认值
属性名:{
type:属性类型,
default:值
}
- 带有默认值的对象,或者是数组时,默认值必须为一个函数
属性名:{
type:Object,
default:function() {
return { "key":"value" }
}
}
- 传进来的值必须是这几个里面中的其中一个
属性名:{
validator:function() {
return ['值1','值2','值3'].indexOf(value) !== -1
}
}
-
自定义类型
先定义这个自定义类型
function 自定义类型名(形参) {
this.实参 = 形参
}
使用这个自定义类型
props:{
author:自定义类型名
}
子传父
- 通过自定义事件传递
还是先创建一个父子关系
在子组件点击按钮时,在父组件上显示点击了那个按钮
<div id="father">
<h1>{{name}}</h1>
<son></son>
</div>
<template id="son">
<div>
<h2>{{name}}</h2>
<button v-for="(item,index) in btnlist">{{item.val}}</button>
</div>
</template>
const son = {
template:'#son',
data(){
return {
name:'我是儿子',
btnlist:[
{id:1,val:'第一个'},
{id:2,val:'第二个'},
{id:3,val:'第三个'},
{id:4,val:'第四个'}
]
}
},
}
const father = new Vue({
el:"#father",
data:{
name:'我是你爹',
},
components:{
son
}
})
- 看一下页面效果
- 给儿子上的按钮添加点击事件
btnClick是点击之后调用的方法,item是传递的参数
<button v-for="(item,index) in btnList" @click='btnClick(item)'>{{item.val}}</button>
- 通过$emit给爹传递数据
- formSonData是自定义事件的名字。待会爹就监听这个事件
- item就是传给爹的数据
- html标签不支持驼峰好讨厌啊
const son = {
//.......
methods:{
btnClick(item) {
this.$emit('formsondata',item)
}
}
}
- 爹监听儿子穿过的自定义事件
giveMeData就是监听到自定义事件后调用的方法
接收到参数和会显示在span标签上
<div id="father">
<h1>{{name}}</h1>
<span>{{sonDataId}}</span><span>{{sonDataVal}}</span>
<son @form-son-data='giveMeData'></son>
</div>
const father = new Vue({
el:"#father",
data:{
name:'我是你爹',
sonDataId:'',
sonDataVal:''
},
methods:{
giveMeData(item) {
console.log('我接收到参数了')
this.sonDataId = item.id
this.sonDataVal = item.name
}
},
components:{
son
}
})
看一下效果
更多推荐
已为社区贡献7条内容
所有评论(0)