在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
}
})
看一下效果
