Ref使用笔记

// 1.给想要获取的元素或者组件设置ref属性(ref="msg")
// 2.通过this.$refs.msg获取该元素或者该组件

一、获取页面DOM元素

<!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>获取页面dom元素</title>
</head>
<body>
  <div id="app">
    <!-- 想要获取的元素设置ref属性 -->
    <h2 ref="msg">{{ message }}</h2>
    <button @click="btnClick">btnClick</button>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  <script>
    const app = new Vue({
      el: "#app",
      data() {
        return {
          message: "hello vuejs"
        }
      },
      methods: {
        btnClick() {
          // 通过[this.$refs.属性值]获取元素
          console.log(this.$refs.msg.innerHTML);
        }
      }
    })
  </script>
</body>
</html>

二、获取子组件内部data

<!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>获取子组件data</title>
</head>
<body>
  <div id="app">
    <!-- 给组件设置ref属性 -->
    <cpn ref="pinfo"></cpn>
    <button @click="btnClick">btnClick</button>
  </div>

  <template id="cpn">
    <div>
      <h2>{{ info.name }} + {{ info.age }} + {{ info.height }}</h2>
    </div>
  </template>
  
  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  <script>
    const app = new Vue({
      el: "#app",
      data() {
        return {
          message: "hello vuejs"
        }
      },
      components: {
        cpn: {
          template: "#cpn",
          data() {
            return {
              info: {
                name: "yg",
                age: 25,
                height: 1.93
              }
            }
          }
        }
      },
      methods: {
        btnClick() {
          console.log(this.$refs.pinfo.info.name);
        }
      }
    })
  </script>
</body>
</html>

三、获取子组件内部方法

<!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>获取子组件内部方法</title>
</head>
<body>
  <div id="app">
    <!-- 给组件设置ref属性 -->
    <cpn ref="pcount"></cpn>
    <button @click="btnClick">获取子组件方法</button>
  </div>

  <template id="cpn">
    <div>
      <p>{{ count }}</p>
      <button @click="countClick">countClick</button>
    </div>
  </template>

  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  <script>
    const app = new Vue({
      el: "#app",
      data() {
        return {
          message: "hello vuejs"
        }
      },
      components: {
        cpn: {
          template: "#cpn",
          data() {
            return {
              count: 0
            }
          },
          methods: {
            countClick() {
              this.count ++;
              console.log("调用成功")
            }
          }
        }
      },
      methods: {
        btnClick() {
          console.log(this.$refs.pcount.countClick());
        }
      }
    })
  </script>
</body>
</html>

四、实例

<!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>p2</title>
</head>
<body>
  <div id="app">
    <!-- 1.获取data数据 -->
    <p ref="dt1">获取data数据</p>
    <button @click="datapClick">btn</button>
    <hr>

    <!-- 2.获取子组件data数据 -->
    <cpn ref="cpn1"></cpn>
    <p ref="dt2">获取子组件data数据</p>
    <button @click="datacClick">btn</button>
    <hr>

    <!-- 3.获取子组件方法 -->
    <cpn ref="cpn2"></cpn>
    <p ref="dt3">获取子组件方法</p>
    <button @click="methClick">btn</button>
  </div>

  <template id="cpn">
    <div>
      <p>{{ info }}</p>
    </div>
  </template>

  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  <script>
    const app = new Vue({
      el: "#app",
      data() {
        return {
          message: "hello vuejs"
        }
      },
      components: {
        cpn: {
          template: "#cpn",
          data() {
            return {
              info: "hello jQuery"
            }
          },
          methods: {
            cpnClick() {
              alert("hello world");
            }
          }
        }
      },
      methods: {
        // 获取data数据
        datapClick() {
          this.$refs.dt1.innerHTML = this.message;
        },
        // 获取子组件data数据
        datacClick() {
          this.$refs.dt2.innerHTML = this.$refs.cpn1.info;
        },
        // 获取子组件methods
        methClick() {
          this.$refs.dt3.innerHTML = this.$refs.cpn2.cpnClick();
        }
      }
    })
  </script>
</body>
</html>
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容