vue ref的使用

<div id="app">
    <div @click="showIndex">
        <a v-for="(person, index) in personArr"
           :key="index"
           ref="listGroup"
           href="javascript:void(0)">
            {{person}}
            <hr>
        </a>
    </div>
</div>
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
<script type="text/javascript">
    new Vue({
        el: '#app',
        data: {
            personArr: ['蔡徐坤', '乔碧萝', '张三', '李四', '王二']
        },
        methods: {
            showIndex(e) {
                console.log(this.$refs.listGroup);
                console.log(this.$refs.listGroup[3])
                //alert(this.$refs.listGroup[3])
            }
        }
    })
</script>

1. 获取本页面的dom元素

<!--App.vue-->
<template>
  <div id="app">
    <div ref="testDom">
        <div>11111</div>
    </div>
    <hr>
    <button @click="getDom">获取div节点</button>
  </div>
</template>
<script>
  export default {
    methods: {
      getDom() {
        console.log(this.$refs.testDom)
      }
    }
  };
</script>

2. 父组件获取子组件中的data

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

<!--子组件-->
<!--HelloWorld.vue-->
<template>
  <div>
    {{ msg }}
  </div>
</template>
<script>
  export default {
    data() {
      return {
        msg: "我是子组件中的data"
      }
    }
  }
</script>

3. 父组件调用子组件中的方法

<!--父组件-->
<!--App.vue-->
<template>
  <div id="app">
    <!--子组件-->
    <hello-world ref="child"></hello-world>
    <button @click="getHello">获取hello-world组件中的方法</button>
  </div>
</template>
 
<script>
  import HelloWorld from "./components/HelloWorld.vue";
  export default {
    components: {
      HelloWorld
    },
    data() {
      return {}
    },
    methods: {
      getHello() {
        this.$refs.child.open();
      }
    }
  };
</script>

<!--子组件-->
<!--HelloWorld.vue-->
<template>
  <div>
  </div>
</template>
<script>
  export default {
    methods: {
      open() {
        console.log("调用到了子组件方法")
      }
    }
  }
</script>

4. 子组件调用父组件方法

这里是双向调用

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

<!--子组件-->
<!--HelloWorld.vue-->
<template>
  <div>
  </div>
</template>
<script>
  export default {
    methods: {
      open() {
        console.log("调用子组件方法成功");
        //  调用父组件方法
        this.$emit("refreshData");
      }
    }
  }
</script>