vue 父子组件传值方法总结(六种方法)
一.父组件传值给子组件1.props子组件<Child>:props:["name"]父组件<Father>:<Child name="小张"></Child>2.$parent子组件接收:this.$parents.msg//这个msg是父组件的msg...
·
一.父组件传值给子组件
1.props
子组件<Child>:
props:["name"]
父组件<Father>:
<Child name="小张"></Child>
2.$parent
子组件接收:
this.$parents.msg //这个msg是父组件的msg
3.依赖注入
通过父组件提供给后代组件曝露的属性和方法
父组件:
data(){
return{
name:"父亲的名字"
}
},
provide:function(){
return {
getName: this.name
}
}
子组件接收:
inject:["getName"]
二.子组件传值给父组件
1.emit
自定义事件
子组件<child>:
this.$emit("increment","我是子组件") //increment: 随便自定义的事件名称 第二个参数是传值的数据
父组件<Father>:
<Child @increment="f1"></Child>
methods:{
f1(data){
console.log(data) //打印"我是子组件"
}
}
2.ref
子组件 <Child>:
data(){
return {
name:"我是子组件"
}
}
父组件 <Father>:
<Child ref="child_id">
methods:{
this.$refs.child_id.name //这个name是子组件的name
}
3.终极方法
使用状态管理工具,例如Vuex
更多推荐
已为社区贡献2条内容
所有评论(0)