Vue子组件监听父组件传值

 

1. 父组件xiaozhushouInput.vue引用子组件xianshidaan.vue

<template>

<xianshidaan v-show="!isxsinput" @watchChild="parentReceive" v-bind:searchdatas="searchdatas"></xianshidaan>

</template>

 

xianshidaan 个人喜欢把引用标签写成页面名称，方便查找

v-show="!isxsinput"  v-show控制控件的显示/隐藏

@watchChild="parentReceive"  watchChild自定义事件，供子组件引用; parentReceive这是父组件的方法

v-bind:searchdatas="searchdatas"  v-bind绑定值；searchdatas子组件取值调用；searchdatas父组件赋值；取值和赋值名称，一般情况下写成一致的

 

<script>

import xianshidaan from '@/components/xianshidaan'

export default {

              data() {

                     return {

isxsinput: true,

                            searchdatas: {

                                   channel:'',

                                   phone:'',

                                   question:'',

                            }

                     }

              },

//声明 注册组件

components: {

                     xianshidaan

              },

methods: {

//父组件的函数

parentReceive(){

                            this.isxsinput = true;

                     }

},

}

</ script>

 

子组件xianshidaan.vue取值

这里的fanhui()是子组件的单击事件