1、父组件向子组件传参
父组件：
objVal: {name: 'aa', age: 18}
<Nav :title="msg" :obj="objVal" />
子组件：
第一种接收方法
props: ['title', 'obj']
第二种接收方法
props: {
title: String, // 简写
title:{ // 具体写法
type: String,
default: '标题'
},
obj: {
name: String,
age: Number
}
}
2、子组件向父组件传参
子组件：
<button @click="del">删除</button>
del( ){
this.$emit('btn', '删除数据')
}
父组件：
<Btn @btn="receive" />
receive(data){
console.log(data) // '删除数据'
}
子组件：
<button @click="del">删除</button>
props: ["delData"]
del( ){
this.$emit('btn', this.delData)
}
父组件：
<Btn :delData="delData" @btn="receive" />
receive(data){
data( )
}
3、父组件使用子组件的数据或方法
子组件：
<button>子组件</button>
msg: '子组件数据'
fun( ){console.log('子组件方法')}
父组件：
<p ref="pp">父组件</p>
<Btn ref="btn" />
this.$refs.btn.msg // '子组件数据'
this.$refs.btn.fun( ) // '子组件方法'
this.$refs.pp.style.color="red"
4、使用provide和inject传值
父组件
data(){
return {
title: '标题'，
obj：{
name: '张三'，
sex: 'man'
}
}
}
provide(){
return {
msg: '信息', // 不是响应式数据
title: this.title, // 不是响应式数据
obj: this.obj // 是响应式数据，必须是监听的对象
}
}
mounted(){
this._provided.msg = '改变信息' //
this.title = '改变标题'
this.obj.name = '李四'
this._provided.obj.sex = 'woman'
}
子组件
{{msg}} // 信息
{{title}} // 标题
{{obj.name}} // 李四
{{obj.sex}} // woman
inject: ['msg', 'title', 'obj']