provide/inject实现响应式数据(学习记录)

2021-07-29 12:02:43 阅读：263 来源： 互联网

标签：count const reactive provide value 响应 inject ref

响应性基础

1使用reactive

import { reactive } from 'vue'

// 响应式状态
const state = reactive({
  count: 0
})

这就是 Vue 响应性系统的本质。当从组件中的 data() 返回一个对象时，它在内部交由 reactive() 使其成为响应式对象。

2 使用refs

ref 会返回一个可变的响应式对象，该对象作为一个响应式的引用维护着它内部的值，这就是 ref 名称的来源。该对象只包含一个名为 value 的 property：

import { ref } from 'vue'

const count = ref(0)
console.log(count.value) // 0

count.value++
console.log(count.value) // 1

ref中传递的参数就是要包裹的响应值，可以是对象等，通过返回的响应式对象的value进行访问。

3 Ref解包

想要通过ref添加的数据在模板中渲染出来，需要在setup函数中进行返回，此时在模板中不需要使用value进行访问，会自动进行解包内部值。

<template>
  <div>
    <span>{{ count }}</span>
    <button @click="count ++">Increment count</button>
    <button @click="nested.count.value ++">Nested Increment count</button>
  </div>
</template>

<script>
  import { ref } from 'vue'
  export default {
    setup() {
      const count = ref(0)
      return {
        count,

        nested: {
          count
        }
      }
    }
  }
</script>

4 实现数据的响应

import {reactive,ref,provide} from 'vue'

export default {

setup() {

// 通过ref和reactive定义传给子组件的响应式数据

const msg = ref("默认文本内容")

const state = reactive({

success:1,

fail:0

})

provide("msg",msg)

return {

msg,

state

}

子组件通过inject接收即可实现响应性

标签：count,const,reactive,provide,value,响应,inject,ref
来源： https://blog.csdn.net/luckandluck/article/details/119207223