Vue父子传值及监听

1、父传子

父组件：

<!-- 父组件-->
<template>
    <div class="container_right">
        <listData :sonId="sonId"></listData>
    </div>
</template>

<script>
//子组件件引入
import listData from "@/views/tool/polling/data_t";
export default {
//import引入的组件需要注入到对象中才能使用
 components: {
    listData,
  },
data() {
//这里存放数据
    return {
    // 传给子元素的id值
      sonId: null,
    };
},
//监听属性 类似于data概念
computed: {},
//生命周期 - 创建完成（可以访问当前this实例）
created() {},
//方法集合
methods: {
    getList(row){
        //在需要的地方进行赋值
        this.sonId = row.id;
    }
},
}
</script>

子组件：

<!-- 子组件-->
<template>
    <div class="container"></div>
</template>
<script>
export default {
//接收的传参
    props: {
        sonId: Number,
    },
    watch: {
        sonId: {
          handler(val) {
            //进行具体操作
          },
           //立即执行
          immediate: true,
        },
    },

}
</script>

2、子传父

子组件：

//在需要传值时，调用
 this.$emit("loading", this.loading);

父组件：

<!-- 父组件-->
<template>
    <div class="container_right"  v-loading="pageloading">
        <listData @change="loading"></listData>
    </div>
</template>
<script>
//子组件件引入
import listData from "@/views/tool/polling/data_t";
export default {
 //import引入的组件需要注入到对象中才能使用
 components: {
    listData,
  },
  data() {
    //这里存放数据
    return {
      // 页面加载
      pageloading: true,
    };
  },
  //方法集合
  methods: {
     loading(name) {
      // 给需要的地方赋值
      console.log(name);
      this.pageloading = false;
    },
  },
}
</script>