Vue 父子组件传值-蒲公英云

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>