vue组件之间通讯

父组件给子组件传递参数

    <template>
        <child :data="childData" @show="showChild"/>
        <!-- 子组件传递过来的值 -->
        <p>{{fatch}}</p>
    </template>

父组件定义属性和方法然后对子组件进行操作和传值，利用v-model和v-on来绑定事件和属性,:data 是定义的属性，@show 是定义的事件

    <script>
        export default {
            name: '',
            data() { 
                return {
                    childData:'我是传递的参数',
                    fatch:'',
                }
            },
            components:{
            },
            mounted() {

            },
            methods:{
                /* 通讯的事件，val是传递过来的值 */
                showChild(val){
                    this.fatch = val
                }
            },
        }
</script>

子组件给父组件传递参数

    <template>
        <input v-model="valData" type="text" maxlength="6" placeholder="输入向父组件传递的值"/>
        <!-- 父组件组件传递过来的值 -->
        <p>{{fatch}}</p>
        <button @click="btn">点击向父组件传值</button>
    </template>

子组件通过props[],来接收父组件传递过来的值，然后在页面中渲染出来，通过定义的事件用this.$emit('定义的事件',参数)传递参数

    <script>
        export default {
            name: '',
            props: ["data"],
            data() { 
                return {
                    valData:'',//输入框输入的值
                }
            },
            components:{
            },
            mounted() {

            },
            methods:{
                btn(){
                    this.$emit("show",valData)
                }
            },
        }
</script>

因为父组件向子组件传递是单向数据流的，所以我们可以使用今天属性值的变化，来实现双向数据流

        <script>
        export default {
            name: '',
            props: ["data"],
            data() { 
                return {
                    valData:'',//输入框输入的值
                }
            },
            components:{
            },
            mounted() {

            },
            methods:{
        
            },
            watch: {
                /* 监听传的值 */
                valData(newval, oldval) {
                    /* 将变化的新值，同步传递给父组件 */
                    this.$emit("show",newval)
                }
            },
        }
</script>

也可以使用computed来监听父组件传递给子组件的值，实现双向数据流

    <template>
        <!-- 父组件组件传递过来的值 -->
        <p>{{getData}}</p>

    </template>

        <script>
        export default {
            name: '',
            props: ["data"],
            data() { 
                return {
                    valData:'',//输入框输入的值
                }
            },
            components:{
            },
            mounted() {

            },
            methods:{
        
            },
            computed: {
                /* 监听传的值 */
                getData() {
                    /* 将变化的新值，同步传递给父组件 */
                    return data
                }
            },
        }
</script>