vue中的ref及refs理解

在項目開發時，我們常常用到ref和refs兩個屬性。

一、一般來說，如果我們把ref屬性定義到html元素之上，我們就可以對html元素進行DOM操作了，省去了傳統的Document.getlelementById操作了，

例如：

<input type="text" ref="input" />
<p ref="word">測試文字</p>
<script>
      new Vue({
        el: "#app",
        mounted(){
          this.$refs.word.style.color="red"
          this.$refs.input1.value = "22";
        }
      })
    </script>

　　

注意：vue的生命周期，如果在節點DOM為實例化之前使用this.$refs屬性會報錯，vue生命周期中mounted才完成DOM實例化！

二、ref屬性用在子組件之中

我們常常在子組件使用ref屬性 來獲取子組件的data屬性值或者方法

 

 

 

<child ref=child></child>
    <script>
      new Vue({
        el: "#app",
        created() {
        },
        mounted() {
          console.log(this.$refs.child.childWord)//獲取子組件中data中的信息
          console.log(this.$refs.child.getchildInfo())//通過子組件的方法獲取信息
        },
        components: {
          child: {
            template: "#child",
            data() {
              return {
                childWord: "子組件信息"
              }
            },
            methods: {
              getchildInfo: function() {
                return "我通過子組件方法獲取的信息！"
              }

            }
          }
        }
      })
    </script>