2019-08-08 父组件给子组件传值的集中方式(持续更新中)
1.this.$parent方式,但是尽量不要用
指定已创建的实例之父实例,在两者之间建立父子关系。子实例可以用 this.$parent 访问父实例,子实例被推入父实例的 $children 数组中。注意,这个this.children是一个数组。
2.通过props的方式(最常用的方式)
在子组件中定义
props:{
secondname:{
type:String,
// 定义该 prop 是否是必填项。在非生产环境中,如果这个值为 truthy 且该 prop 没有被传入的,则一个控制台警告将会被抛出。
required:false,
default:'laowang'
}
},
在子组件中使用这个props
<template>
<div class="out-container">
<input type="text" :value='secondname'>
</div>
</template>
在父组件中传递参数
<children-son :secondname='lllName'></children-son>
data(){
return{
lllName:'leilaohu'
}
}
3.通过provide / inject可以把父组件的消息传递给左右的后代元素
provide 和 inject 主要为高阶插件/组件库提供用例。并不推荐直接用于应用程序代码中。
provide和inject使用场景也是组件传值,尤其是祖父组件--孙组件等有跨度的组件间传值,单向传值(由provide的组件传递给inject的组件)。
父组件中
components:{childrenSon},
provide(){
return{
elForm:this
}
},
data () {
return {
message:0,
message1:'zhangsan',
person:{name:'乔大帅'},
firstName:'qiao',
lllName:'leilaohu',
}
},
子组件中
<input type="text" :value='elForm.message1'>
name:'childrenSon',
inject: ['elForm'],
data(){
return{
name:'xiaobai',
age:10,
Name:'',
}
},