vue中的ref及refs理解

Posted 2020-12-20 agen-su

在项目开发时，我们常常用到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>