vue父组件与子组件之间的传值

发布网友 发布时间：2022-10-16 07:31

我来回答

共2个回答

懂视网 时间：2023-01-23 19:40

vue父组件怎么向子组件传递数据呢？不知道的小伙伴来看看小编今天的分享吧!

vue父组件向子组件传递数据的方法有四种：props和event、ref、provide和inject、vuex。

1、props和event

父组件向子组件传递props数据，子组件通过触发事件向父组件回传数据，代码如下：

//子组件 

<template>

<div @click="changeName('YYY')">{{name}}</div>

</template>

<script>

export default{

props:['name'],//or props:{name:{type:String,default:''}}

methods:{

//不能在子组件修改props数据，应触发事件让父组件处理

changeName(newName){

this.$emit('changeName',newName)

}

}

}

</script>

//父组件

<template>

<div>

<child-comp :name="name" @changeName="changeName"></child-comp>

</div>

</template>

<script>

import childComp from 'path'

export default{

data(){

return {name:'XXX'}

},

components:{

childComp

},

methods:{

changeName(newName){

this.name = newName;

}

}

}

</scritp>

以上就是一个完整的流程，父组件通过props将数据传递给子组件，子组件则触发事件，由父组件监听，并做相应处理。

2、ref

ref属性可定义在子组件或原生DOM上，如果在子组件上，则指向子组件实例，如果在原生DOM上，则指向原生DOM元素（可以用做元素选择，省去querySelector的烦恼）。

传递数据的思路：在父组件内通过ref获取子组件实例，然后调用子组件方法，并传递相关数据作为参数。代码如下：

//子组件 

<template>

<div>{{parentMsg}}</div>

</template>

<script>

export default{

data(){

return {

parentMsg:''

}

},

methods:{

getMsg(msg){

this.parentMsg = msg;

}

}

}

</script>

//父组件

<template>

<div>

<child-comp ref="child"></child-comp>

<button @click="sendMsg">SEND MESSAGE</button>

</div>

</template>

<script>

import childComp from 'path'

export default{

components:{

childComp

},

methods:{

sendMsg(){

this.$refs.child.getMsg('Parent Message');

}

}

}

</scritp>

3、provide和inject 

官方不推荐在生产环境使用

provide意为提供，当一个组件通过provide提供了一个数据，那么它的子孙组件就可以使用inject接受注入，从而可以使用祖先组件传递过来的数据。代码如下：

//child

<template>

<div>{{appName}}</div>

</template>

<script>

export default{

inject:['appName']

}

</script>

// root 

export default{

data(){

return {

appName:'Test'

}

},

provide:['appName']

}

4、vuex

vue官方推荐的全局状态管理插件。

以上就是小编今天的分享了，希望可以帮助到大家。

热心网友 时间：2023-01-23 16:48