vue父子组件传值.sync语法糖

父子传值props

父组件传递

<test :content="title"></test>
data() {
	return {
		title: 'Hello'
	}
},

子组件接收

props:{
	content:{
		type:String,//类型
		default:'',//默认值
		validator: function(val){//预处理props接收过来的数据
			return val
		},
	}
}

props大概有这几种类型

props:{
	refstr:{
		type:String,
		default:''
	},
	refnum:{
		typr:Number,
		default:0
	},
	refbool:{
		type: Boolean,
		default: false
	},
	refarr:{
		type:Array,
		default:()=>{
			return []
		}
	},
	refobj:{
		type:Object,
		default:()=>({})
	},
	reffun:{
		type:Function,
		default:()=>()=>{}
	}
}

子父传值$emit

子组件

<button type="default" @click="ok">子组件点击</button>
ok(){
	this.$emit('child-event','我要传递的信息')
}

父组件

<test :content="title" @child-event="parent"></test>
parent(e){
	console.log(e)//打印出子组件传递的信息
}

父组件调用子组件方法ref

父组件给子组件添加ref，并且命名。

<view class="home">
	<button type="default" @click="setup">点击</button>
	<test ref="test"></test>
</view>
methods: {
	setup(){
		this.$refs.test.ok()
		this.$refs.test.adv = '修改你'
	},
}

子组件

<view class="">
	{{adv}}
	<button type="default" @click="ok">子组件点击</button>
</view>
data(){
	return {
		adv:'子组件内容'
	}
},
methods:{
	ok(){
		console.log('我是子组件的方法')
	}
}

子组件改变父组件的值：.sync语法糖

父组件

<div>
	{{isShow}}
	<test ref="test" :refbool.sync='isShow'></test>
</div>
data() {
	return {
		isShow:true
	}
},

子组件

<div class="">
	<button type="default" @click="ok">子组件点击</button>
</div>
props:{
	refbool:{
		type: Boolean,
		default: false
	},
},
methods:{
	ok(){
		this.$emit('update:refbool',false)
	}
}