在Nuxt中,父子组件间的数据传递数据有两种方法,如下
1、 props
父组件通过props将数据传递给子组件,子组件通过props接收数据。代码如下:
<template>
<div>
<ChildLeft :msg="msg"></ChildLeft>
</div>
</template>
<script>
import ChildLeft from '@/components/child-left.vue'
export default {
components: {
ChildLeft
},
data () {
return {
msg: 'hello'
}
}
}
</script>
在子组件中通过props接收msg数据:
<template>
<div>{{ msg}}</div>
</template>
<script>
export default {
props: {
msg: {
type: String,
required: true
}
}
}
</script>
2、$emit
子组件通过$emit向父组件派发事件,同时将需要传递的数据作为参数。在父组件中使用@事件名监听子组件派发的事件,通过$event获取子组件传递的数据。代码如下:
<template>
<div>
<ChildLeft @update-msg="setMsg"></ChildLeft >
<p>{{ msg}}</p>
</div>
</template>
<script>
import ChildLeft from '@/components/child-left.vue'
export default {
components: {
ChildLeft
},
data () {
return {
msg: ''
}
},
methods: {
setMsg(msg) {
this.msg= msg
}
}
}
</script>
在子组件中通过$emit派发事件,同时将需要传递的数据作为参数传递:
<template>
<div>
<button @click="updateMsg">update msg</button>
</div>
</template>
<script>
export default {
methods: {
updateMsg() {
this.$emit('update-msg', 'new msg')
}
}
}
</script>
在父组件中监听update-msg事件,通过$event获取子组件传递的数据。在本例中,需要将子组件传递的数据作为参数传递给setMsg方法。
在实际开发中我们有时候需要直接帮传过来值作为model,用此方法导致参数未双向绑定,所以会报一下错误
v-model cannot be used on a prop, because local prop bindings are not writable。
我们可以参考Nuxt:父传子,将字段作为v-model异常-CSDN博客 此方法即可解决此问题