Vue之父子组件主动获取数据和方法

• 父组件主动获取子组件的数据和方法
  父组件代码,this.$refs接收子组件数据和方法：

<template>
  <div id="root">
    <div>
      <input ref="name" name="">
    </div>
    <div>
      <v-couter ref="counter"></v-couter>
    </div>
    <div>
      <button class="button" @click="run">点我</button>
    </div>
  </div>
</template>

<script>
// 1.引入组件
import Counter from "./components/Counter.vue"
export default {
  //2.注册组件
  components:{
    'v-couter': Counter
  },
  data(){
    return{
     num: 6
    }
  },
  methods:{
    run(){
      //console.log(this.$refs.counter.msg)
      this.$refs.counter.todo()
    }
  }
}
</script>

子组件代码：

<template>
    <div class="counter">
    </div>
</template>

<script>
export default {
    props:['num'],
    data(){
        return{
            msg:"这是子组件"
        }
    },
    methods:{
        todo(){
            alert("这是子组件")
        }
    }
}
</script>

• 子组件主动获取父组件的数据和方法
  父组件代码：

<template>
  <div id="root">
    <div>
      <v-couter ref="counter"></v-couter>
    </div>
  </div>
</template>

<script>
// 1.引入组件
import Counter from "./components/Counter.vue"
export default {
  //2.注册组件
  components:{
    'v-couter': Counter
  },
  data(){
    return{
     msg:"这是父组件的数据"
    }
  },
  methods:{
    run(){
      alert("这是父组件")
    }
  }
}
</script>

子组件代码,this.$parent接收父组件数据和方法：

<template>
    <div class="counter">
        <button class="button" @click="run">点我</button>
    </div>
</template>

<script>
export default {
    props:['num'],
    data(){
        return{
            msg:"这是子组件"
        }
    },
    methods:{
        run(){
            console.log(this.$parent.msg) 
            this.$parent.run()  
        }
    }
}
</script>