vue的父子组件传值

父组件向子组件传值

<div id="app">
    <tem-parent></tem-parent>
</div>
<script>
     Vue.component("tem-parent", {
                        // 通过属性绑定的形式将数据msg传入子组件 
        template: "<div><tem-child :msg='msg'></tem-child></div>",
        data() {
            return {
                msg: 1
            }
        }
    })
    Vue.component("tem-child", {
                    // 渲染 msg
        template: "<div><p>{{msg}}</p></div>",
        props: {
            // props字段，用来接收父组件传入的值
            msg: {
                type: Number,   // msg 类型为数字类型
                default: 0      // 默认值为0
            }
        }
    })
     let vm = new Vue({
        el: "#app"
    })
</script>

效果图

子组件向父组件传值

1、 $parent

    Vue.component("tem-parent", {
        template: "<div><tem-child :msg='msg'></tem-child></div>",
        data() {
            return {
                msg: 1
            }
        }
    })
    Vue.component("tem-child", {
                                              // 添加点击事件，并把newmsg作为参数传入
        template: "<div><p>{{msg}}</p><button @click='changeMsg(newmsg)'>点击改变msg</button></div>",
        data(){
           return{
               newmsg:99
           }
        },
        props: {
            msg: {
                type: Number,
                default: 0
            }
        },
        methods: {
            changeMsg(newmsg){
                // 通过$parent 改变父组件msg的值
                this.$parent.msg = newmsg
            }
        }
    })

2、 $emit 常用

1)自定义事件

    Vue.component("tem-parent", {
                                         //接受子组件的自定义事件myevent
        template: "<div><tem-child :msg='msg' @myevent='changeMsg'></tem-child></div>",
        data() {
            return {
                msg: 1
            }
        },
        methods: {
            changeMsg(newmsg) {
                //接受子组件的newmsg 并赋值给 msg
                this.msg = newmsg
            }
        }
    })

    Vue.component("tem-child", {
                                                     // 添加点击事件，并把newmsg传入
        template: "<div><p>{{msg}}</p><button @click='changeParentMsg(newmsg)'>点击改变msg</button></div>",
        data() {
            return {
                newmsg: 99
            }
        },
        props: {
            msg: {
                type: Number,
                default: 0
            }
        },
        methods: {
            changeParentMsg(newmsg) {
                //自定义事件为myevent，并把newmsg传入，业务逻辑交给父组件处理
                this.$emit("myevent", newmsg)
            }
        }
    })

1)sync修饰符

    Vue.component("tem-parent", {
                                   // 绑定的时候，添加sync修饰符(其实是@update:msg="val=>msg=val"的简写形式)
        template: "<div><tem-child :msg.sync='msg'></tem-child></div>",
        data() {
            return {
                msg: 1
            }
        }
    })
    Vue.component("tem-child", {
        template: "<div><p>{{msg}}</p><button @click='changeMsg(newmsg)'>点击改变msg</button></div>",
        data() {
            return {
                newmsg: 99
            }
        },
        props: {
            msg: {
                type: Number,
                default: 0
            }
        },
        methods: {
            changeMsg(newmsg) {
                this.$emit("update:msg", newmsg)
            }
        }
    })

效果图

点击“点击改变msg”按钮后