vue组件之间传值
在 Vue 中,可以使用 props 向子组件传递数据。
父组件部分:
<template>
<div id="parent">
<v-child :msg="parentMsg">v-child>
div>
template>
<script>
export default {
name: "Parent",
data () {
return {
parentMsg: "from parent"
}
},
components: {
vChild: () => import("./vChild.vue")
}
}
script>
在调用组件的时候,使用 v-bind 将 msg 的值绑定为父组件中定义的变量 parentMsg
子组件部分:
<template>
<div id="child">
{{msg}}
div>
template>
<script>
export default {
name: "Child",
props: ["msg"],
data () {
return {
}
},
watch: {
msg (val) {
console.log(msg)
}
}
}
script>
在 props 中添加了元素之后,就不需要在 data 中再添加变量了。父组件中值发生变化子组件可以监听到。
子组件向父组件传值通过调用父组件的方法实现
父组件部分:
<template>
<div id="parent">
<v-child @parentHandle="childHandle">v-child>
div>
template>
<script>
export default {
name: "Parent",
data () {
return {
parentMsg: "from parent"
}
},
components: {
vChild: () => import("./vChild.vue")
},
methods: {
childHandle(msg){
console.log(msg)
}
}
}
script>
父组件中的 childHandle 方法以 parentHandle 名称传递给子组件
子组件部分:
<template>
<div id="child">
<input type="text" v-model="msg" @change="inputChange" />
div>
template>
<script>
export default {
name: "Child",
data () {
return {
msg: ""
}
},
methods: {
inputChange () {
this.$emit("parentHandle", this.msg)
}
}
}
script>
Vue 没有直接子对子传参的方法,如果需要子对子传参,可以先传到父组件,再传到子组件。