Vue 父子组件传值

新建子组件

新建一个模板对象com1，然后在vm中的components里注册一下，就可以使用com1标签了，标签内容就是子元素的内容。

//子组件
var com1 = {
	template: '#tmp1'
}
//父组件
var vm = new Vue({
	el: '#app',
	components: {
		com1
	}
})

在父元素中使用com1标签，就可以显示子元素的内容了

//父元素
<div id="app"> 
	<com1></com1>
</div>
//子元素
<template id="tmp1">
	<div>
		<h2>我是子元素</h2>
	</div>
</template>

父组件向子组件传值

用属性传值: 用v-bind定义一个名字获取父组件的msg

<div id="app">
	<com1 :parentmsg="msg" ></com1>
</div>

然后子组件通过props定义一下parentmsg，然后把parentmsg放在子元素就能显示了

<template id="tmp1">
	<div>
		<h2>我是子元素 --- {{ parentmsg }}</h2>
	</div>
</template>

<script>
	var com1 = { // 子组件
		template: '#tmp1',
		props:['parentmsg'] //用props定义一下v-bind绑定的parentmsg，子元素就可以使用了
	}
	var vm = new Vue({  // 父组件
		el: '#app',
		data: {
			msg: '这是父组件的数据'
        },
        components: {
            com1
        }
    })
</script>

子组件向父组件传值

在父元素定义一个方法，当子组件调用这个方法的时候，就会传过来一个参数（data），这个参数就是子组件的数据。获取数据放到data里输出就好了。

子元素点击sentdMsg（），通过$emit（）方法调用func函数，并把子元素的msg传到参数data中

//父元素
<div id="app">
	<com1 :parentmsg="msg" @func="getMsgFormSon"></com1>
</div>
//子元素
<template id="tmp1">
	<div>
        <h2>我是子元素 --- {{ parentmsg }} </h2>
        <input type="button" value="向父组件传递的内容" @click="sendMsg">
    </div>
</template>

<script>
    var com1 = {  // 子组件
        template: '#tmp1',
        data() {
            return {
                msg: 'i am 子组件'
            }
        },
        props: ['parentmsg'], //用props定义一下v-bind绑定的parentmsg，子元素就可以使用了
        methods: {
            sendMsg() {  //点击函数触发事件
                this.$emit('func', this.msg) //使用$emit方法调用func函数并吧msg带过去
            }
        }
    }
    var vm = new Vue({  // 父组件
        el: '#app',
        data: {
            msg: '这是父组件的数据',
            msgFormSon: ''  //用来存放子元素数据
        },
        methods: {
            getMsgFormSon(data) {  //当子元素调用这个方法的时候执行，并带过来data参数（也就是子元素的值）
                this.msgFormSon = data  //获取到子元素的值保存到data里
                console.log(this.msgFormSon)
            }
        },
        components: {
            com1
        }
    })
</script>