父子组件主动获取数据

父组件主动获取子组件

说明：

1在子组件绑定ref

2通过
this.$refs.属性名.数据调用

示例

父组件

src/components/pc/home/v_home_list.vue

<template>
   <div class="v_home_list">
      <div>
         {{ title }}
      </div>
      <button @click="getSon2()">主动获取组件2</button>
      <hr/>
      <div class="one">
         <v_byvalue_one :parame="parame_one" :pick="pick" :self="this"></v_byvalue_one>
      </div>
      <hr/>
      <div class="one">
         <v_byvalue_two ref="two"></v_byvalue_two>
      </div>
      
   </div>
   
</template>
 
<script>
import v_byvalue_one from "@/components/pc/home/v_home_byvalue_one.vue";
import v_byvalue_two from "@/components/pc/home/v_home_byvalue_two.vue";
export default {
 
  name: 'v_home_list',
 
  data() 
  {
    return {
      title:"我是HOME首页列表页",
      parame_one:'我是父组件传给组件1的值',
      parame_two:'我是父组件传给组件2的值'
 
    };
  },
  components:
  {
    v_byvalue_one,
    v_byvalue_two: v_byvalue_two
  },
  methods:
  {
   pick()
   {
      alert('我是父组件的弹出方法');
   },
   getSon2()
   {
      console.log(this.$refs.two);
      console.log(this.$refs.two.title);
   }
  }
};
</script>
 
<style lang="css" scoped>
 
.v_home_list
{
   width: 100%;
   height: 100%;
   background-color: rgba(255, 255, 255, 0.5);
}
 
.one
{
   width: 100%;
   height: 40%;
}
</style>

子组件

src/components/pc/home/v_home_byvalue_two.vue

<template>
   <div class="byvalue_two">
      <div>
         {{ title }}
      </div>
   </div>
</template>
 
<script>
export default {
  name: 'byvalue_two',
  data() 
  {
    return {
      title:"我是组件传值2测试"
    };
  },
};
</script>
 
<style lang="css" scoped>
.byvalue_two
{
   width: 100%;
   height: 100%;
   background-color: rgba(255, 255, 255, 0.5);
}
</style>

子组件主动获取父组件

说明:
通过
this.$parent.数据
获取

示例

父组件不变 该实例主要观察子组件

src/components/pc/home/v_home_byvalue_two.vue

<template>
   <div class="byvalue_two">
      <div>
         {{ title }}
      </div>
      <div>
         <button @click="getParent()">主动获取父组件传值</button>
      </div>
   </div>
</template>
 
<script>
export default {
  name: 'byvalue_two',
  data() 
  {
    return {
      title:"我是组件传值2测试"
    };
  },
  methods:
  {
   getParent()
   {
      console.log(this.$parent.title);
   }
  }
};
</script>
 
<style lang="css" scoped>
.byvalue_two
{
   width: 100%;
   height: 100%;
   background-color: rgba(255, 255, 255, 0.5);
}
</style>