vue中如何实现父子组件传值

2022-12-30 0 891

在vue的模块通讯中,通常遵从大项报文准则,大部份的 prop 都使其兄弟二人 prop 间逐步形成了两个双向上行存取:父级 prop 的预览会向上壳状到子模块中,但如此一来则没用。

上面如是说三种fork形式

1,父陈谟

透过propsfork,转交时明确规定响起的表达式的正则表达式(type)和缺省(default)和与否关主(require)

例:父模块中

子模块中{{ data }}

props:{

data:{

type: Object,

default:()=>{}

}

}

2,子传父

在子模块的条码上自订两个该事件,透过this.$emit()传达模块第一类,接着在父模块中转交。

例:子模块中

sendData(){

this.$emit(handleChange,true)// true为须要传达的模块第一类

}

父模块中

getData(val){

console.log(val)//结果为true

}

3、兄弟模块(平级传达)

利用中央该事件总线—-eventbus

首先在main.js中添加两个生命周期函数,在里面定义个bus指向vue实例

new Vue({

el:#app,

beforeCreate(){

vue.prototype.$bus = this

},

render: h =>h(App)

})

接着,在模块1中使用$on去监听自订该事件,触发模块2的模块fork,渲染到模块1中,

模块1{{data}}

mounted(){

this.$bus.$on(“getData”,(i)=>{

this.data = i

})

}

模块2

sendData(){

const data =123

this.$bus.$emit(“getData”, data)

}

4、使用vuex把公共数据存储到vuex中

5、使用provide和inject(适用祖孙模块fork)

provide

是两个第一类或返回两个第一类的函数。该第一类包含可注入其子孙模块的数据

inject:两个字符串数组,或两个第一类。如果是第一类,第一类的 key 是本地的存取名,value 是,包含from和default缺省。

例:父模块中

export default {

data(){

return {

parentValue:123

}

}

provide(){

val: this,

parentVal: parentValue

}

}

孙模块中,注入inject

export default {

inject:[val,parentVal]

}

created(){

console.log(this.val, this.parentVal)

}

6、$parent和$children,这个我没用过

vue中如何实现父子组件传值

相关文章

发表评论
暂无评论
官方客服团队

为您解决烦忧 - 24小时在线 专业服务