父子组件的相互传值

在vue中父组件向子组价的传值：使用props数组

new Vue({
    el: "#app",
    data: {
        ids:100
    },
    components: {
        'sub': {
            template: "#sd",
            props:['ids']//负责接收父组件传入的值
        }
    }
})

 现在需要获取父组件中的ids的值，就需要使用props接收父组件传入的值。

<template id="sd">
    {{ids}}
</template>
<p id="app">
    <input type="text" v-model="ids">
    <!--2.0通过在父组件中调用子组件的时候利用 :绑定对应的props中定义的参数再将值传递给子组件即可-->
    <sub :ids="ids"></sub>
</p>

效果：

通过v-model绑定ids的值，使得子组件中的值实时更新。

子组件向父组件传值：使用this.$emit发送信息

new Vue({
    el: "#app",
    methods:{
        getdata:function (input) {
            alert(input)
        }
    },
    components: {
        'sub': {
            template:'#ss',
            methods:{
                senddata:function () {
                    //将值传给父组件
                    this.$emit('send','子组件传值成功')
                }
            }
        }
    }
});

在senddata中使用了$emit来遍历send事件，并返回了字符串'子组件传值成功'。

<template id="ss">
    <button @click="senddata">发送数据给父组件</button>
</template>
<p id="app">
    <sub @send="getdata"></sub>
</p>

效果：

点击后弹出：