Vue中ref的用法：获取DOM 父获取子数据父使用子方法子调用父方法

电玩女神 2023-01-11 08:55 216阅读 0赞

### 获取本页面dom元素 ###

<template>
      <div id="app">
        <div ref="testDom">11111</div>
        <button @click="getTest">获取test节点</button>
      </div>
    </template>
    
    <script>
    export default {
      methods: {
        getTest() {
            //输出<div ref="testDom">11111</div>
          console.log(this.$refs.testDom)
        }
      }
    };
    </script>

### 父组件获取子组件中的数据data ###

子组件
    <template>
      <div>
          {
       { msg }}
      </div>
    </template>
    <script>
    export default {
      data() {
        return {
          msg: "hello world"
        }
      }
    }
    </script>
    
    父组件
    <template>
      <div id="app">
        <HelloWorld ref="hello"/>
        <button @click="getHello">获取helloworld组件中的值</button>
      </div>
    </template>
    <script>
    import HelloWorld from "./components/HelloWorld.vue";
    export default {
      components: {
        HelloWorld
      },
      data() {
        return {}
      },
      methods: {
        getHello() {
            //输出hello world
          console.log(this.$refs.hello.msg)
        }
      }
    };
    </script>

### 父组件调用子组件中的方法 ###

子组件
    <template>
      <div>
      </div>
    </template>
    <script>
    export default {
      methods: {
        open() {
          console.log("调用到了")
        }
      }
    }
    </script>
    
    父组件
    <template>
      <div id="app">
        <HelloWorld ref="hello"/>
        <button @click="getHello">获取helloworld组件中的值</button>
      </div>
    </template>
    <script>
    import HelloWorld from "./components/HelloWorld.vue";
    export default {
      components: {
        HelloWorld
      },
      data() {
        return {}
      },
      methods: {
        getHello() {
          this.$refs.hello.open();
        }
      }
    };
    </script>

### 子组件调用父组件方法：子组件使用emit  父组件使用@ ###

子组件
    <template>
      <div>
    </div>
    </template>
    <script>
    export default {
      methods: {
        open() {
          console.log("调用了");
          //  调用父组件方法
          this.$emit("refreshData");
        }
      }
    }
    </script>
    
    父组件
    <template>
      <div id="app">
        <HelloWorld ref="hello" @refreshData="getData"/>
        <button @click="getHello">获取helloworld组件中的值</button>
      </div>
    </template>
    <script>
    import HelloWorld from "./components/HelloWorld.vue";
    export default {
      components: {
        HelloWorld
      },
      data() {
        return {}
      },
      methods: {
        getHello() {
          this.$refs.hello.open()
        },
        getData() {
          console.log('111111')
        }
      }
    };
    </script>