Vue中操作DOM节点 ---ref属性

Vue中操作DOM节点 —ref属性

1. ref属性可以帮助我们读到原生的DOM节点，从而可以操作原生DOM节点来完成一些需求

<template>
    <button @click="updateMsgHandle">按钮</button>
    // 【ref属性】
    <p ref="passage">{{ msg }}</p>
</template>

<script>
export default {
    data(){
        return{
            msg:"我是一段话"
        }
    },
    methods:{
        // 通过修改DOM元素的innerHTML来修改文本
        updateMsgHandle(){
        	// 【ref使用】
            console.log(this.$refs); // {passage: p}
            this.$refs.passage.innerHTML = "新的文本";
        }
    }
}
</script>

2. 通过this.$refs读取子级中的数据

// Son.vue
<template>
</template>

<script>
export default {
    data(){
        return{
            text:"我是Son.vue中的数据"
        }
    }
}
</script>

// Parent.vue
 <button @click="clickHandle">按钮</button>
 // 【需要在这里写ref属性】
 <Son ref="SonObj"/>  

<script>
import Son from './components/Son.vue'

export default {
  methods:{
    clickHandle(){
    // 【this.$refs 父级中读取子级的数据】
      console.log(this.$refs.SonObj.text); // 我是Son.vue中的数据
    }
  },
  components: {
    Son
  }
}
</script>