【vue】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 没有直接子对子传参的方法，如果需要子对子传参，可以先传到父组件，再传到子组件。