学习笔记——Vue中父子组件传值

---

在vue中，使用组件时，我们可能会在一个页面级组件中调用其他功能组件，例如数量加减的组件，那么如何使父子组件之间进行通信哪？

父组件向子组件传参：

父组件向子组件传递数据或函数，子组件接收后调用，在下面的例子中子组件点击事件触发时，会调用父组件传过来的函数，从而改变父组件中的数据msgFather，进而改变子组件中的msgSon。

<!-- 子组件 -->
<template>
	<div>
		<span style="color: red;" v-text="msgSon" @click="changeMsgSon"></span>
	</div>
</template>

<script>
        export default {
                name: 'HelloWorld',
                props: {
                        msgSon: {  type: String, required: true },
                        changeMsgSon: {  type: Function, required: true }
                }
        }
</script>

<!--  父组件 -->
<template>
	<div>这是主页
        <!-- 使用子组件 -->
		<HelloWorld :msgSon="msgFather"  :changeMsgSon="changeMsgFather"></HelloWorld>
	</div>
</template>

<script type="text/ecmascript-6">
	    import HelloWorld from '../../components/HelloWorld';
        export default {
            name: 'Home',
	        data: function() {
                return {
                        msgFather: '你好，世界！'
                       };
	        },
	        components: {
                        HelloWorld
	        },
	        methods: {
                changeMsgFather: function() {
                        this.msgFather = '世界，你好！';
                }
	        },
        };
</script>

子组件向父组件传参：

第一种方式：函数调用传参

父组件向子组件传递数据或函数，子组件接收后调用，在下面的例子中子组件点击事件触发时，会调用父组件传过来的函数并向该函数中传递一个参数，从而改变父组件中的数据msgFather，进而改变子组件中的msgSon。以下例子中代码相对于上一例子只改变了两处地方。

<!-- 子组件:接收后的函数加入了参数 -->
<span style="color: red;" v-text="msgSon" @click.self="changeMsgSon('久违了，世界！')"></span>

<!-- 父组件:传递的值用接收的形参来赋值 -->
changeMsgFather(msg) { this.msgFather = msg; }

第二种方式：emit发射事件传参

子组件向父组件发射一个事件，可以带参数，也可以不带参数。父组件监听这个事件，并作出相应的操作

<!-- 子组件 -->
<span style="color: red;" v-text="msgSon" @click.self="$emit('changeMsg', 'Hello')"></span>
props: { msgSon: {  type: String, required: true } }

<!-- 父组件 -->
<HelloWorld :msgSon="msgFather"  @changeMsg="changeMsgFather"></HelloWorld>

第三种方式：v-model实现

模拟了vue中的v-model来实现父子组件之间的传参，与第一个实例不同之处如下：

<!-- 子组件 -->
<span style="color: red;" v-text="msgSon" @click.self="$emit('changeMsg', 'Hello')"></span>
props: { msgSon: String },
model: {
        prop: "msgSon",
	    event: "changeMsg"
}

<!-- 父组件 -->
<HelloWorld v-model="msgFather"></HelloWorld>

以上就是现在学习的实现父子组件之间传参的三种方法。