vue $refs

Posted on Edited on In Views: Disqus:

 

範例如下

<html>

<head>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>

<body>

  <div id="app">
    <!-- ref attribute，也可以透過 :ref 的方式代入變數 -->
    <div ref="childDiv">
      <child-component></child-component>
    </div>
    <button @click="show">child-component element info</button>
  </div>

  <script>
    let vm = new Vue({
      el: "#app",
      components: {
        'child-component': {
          template: `<div>子元件</div>`,
          data() {
            return {}
          },
        }
      },
      methods: {
        show: function () {
          console.log(this.$refs.childDiv.innerText);
        }
      }
    });
  </script>

</body>

</html>

說明：

使用 $ref 可以去取得子元件之元素。

 

參考資料：

Accessing Child Component Instances & Child Elements