ref的使用-优快云博客

该博客介绍了Vue中如何通过Ref进行组件间通信，包括DOM元素和自定义组件的引用。示例代码展示了如何在父组件中获取子组件的属性和方法，以及在DOM元素上绑定Ref并读取其值。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>ref 组件通信</title>
    <!-- <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script> -->
    <!-- 生产环境版本，优化了尺寸和速度 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
    <!-- 引入axios -->
    <script src="https://cdn.jsdelivr.net/npm/axios@1.1.2/dist/axios.min.js"></script>
  </head>
  <body>
    <div id="app">
      <div>
        <input type="text" ref="mtext" />
        <button @click="lookMtext">lookMtext</button>
        <my-label ref="mylabel"></my-label>
      </div>
    </div>
  </body>
  <script>
    // ref 绑定dom，获取的对象就是dom对象
    // ref绑定的是组件，获取的对象就是组件对象

    Vue.component("my-label", {
      template: `<div>
        my-label {{mycontent}}
        </div> `,
      data() {
        return {
          mycontent: "my-label组件定义的内容",
        };
      },
    });

    new Vue({
      el: "#app",
      data: {},
      methods: {
        lookMtext() {
          console.log(this.$refs.mtext.value);
          console.log(this.$refs.mylabel.mycontent);
        },
      },
    });
  </script>
</html>