vue ref

ref

1 vue2 ref属性

• 也可以实现组件间通信：子和父都可以实现通信

• ref放在标签上，拿到的是原生的DOM节点

• ref放在组件上，拿到的是组件对象 ，对象中的数据、函数 都可以直接使用

• 通过这种方式实现子传父（this.$refs.mychild.text）

• 通过这种方式实现父传子（调用子组件方法传参数）

1.1 AboutView.vue

<template>
  <div class="about">
    <h1 ref="h1">This is an about page</h1>
    <Child ref="child"></Child>
    <button @click="handleShow">点我看控制台</button>
  </div>
</template>


<script>
import Child from "@/components/Child.vue";
export  default {
  name:'About',
  data(){
    return {
      name:'xxx'
    }
  },
  methods:{
    handleShow(){
      //是在组件中所有标签设置了ref属性的 字典 {mychild:组件对象}
      console.log(this.$refs)
      //拿到组件对象的属性--》在父中，拿到了子的变量--》子传父
       console.log(this.$refs.child.title)
      //修改组件对象的属性--》在父中，修改子的属性--》父传子
      this.$refs.child.title='首页'
      //调用子组件中的函数
      this.$refs.mychild.handleChange
    }
  },
  components:{
    Child
  }
}
</script>

1.2 Child.vue

<template>
  <div>
    <div class="top">
      <button>后退</button>
      <span @click="handleShow">{{ title }}</span>
      <button @click="handlelog">前进</button>
    </div>

  </div>
</template>
<script>
export default {
  name: 'Child',
  data() {
    return {
      title: '首页1'
    }
  },
  methods: {
    handleShow() {
      alert('1111')
    },
    handlelog(){
        //拿到父级组件的对象属性
      console.log(this.$parent.name)
    }
  }
}
</script>

2 vue3 ref 响应式的引用

2.1 ref 和 reactive

• ref 包裹值类型[数字，字符串，布尔]，做成响应式
• reactive包裹引用类型[对象，数组]，做成响应式
• 使用reactive包裹的对象，直接通过 . [] 取值赋值就是响应式的
• ref包裹的对象，需要使用 对象.value 修改值
• 使用ref包裹的，在template中，不许用使用 变量.value

<template>
    <h1>ref</h1>
    <p>爱好是：{{ hobby }}</p>
    <h1>reacitve</h1>
    <p>名字：{{ person.name }}  年龄：{{ person.age }}</p>
    <button @click="handleAddAge">点击年龄+1</button>
</template>

<script setup>
    import {ref,reactive} from 'vue'

    const hobby = ref('篮球')
    const person = reactive({name: 'qc', age: 25})
    const handleAddAge = () => {
        person.age++
    }
</script>