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

一时失言乱红尘 2022-04-22 14:06 124阅读 0赞

*  **父组件主动获取子组件的数据和方法**  
    父组件代码,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>