<template>
  <h1>ref定義的值{{refNum}}</h1>
  <h1>reactive定義的值{{reactiveNum}}</h1>
  <h1>reactive定義的數(shù)組{{reactiveArr}}</h1>
  <little
    :refNum="refNum"
    :reactiveNum="reactiveNum"
    :reactiveArr="reactiveArr"
  ></little>
</template>

<script>
import little from './little'
import { toRefs, reactive, ref } from 'vue'
export default {
  name: "big",
  components: { little },
  setup () {
    const refNum = ref(0)// 不能直接通過(guò)子組件改變
    const reactiveObj = reactive({
      reactiveNum: 0,  // 不能直接通過(guò)子組件改變
      reactiveArr: [1, 2, 3]  // 不改變內(nèi)存地址，可以通過(guò)子組件之間改變里面的值
    })
    return {
      refNum,
      ...toRefs(reactiveObj)
    }
  }
}
</script>

<style>
</style>

<template>
  <button @click="changeRefVal">點(diǎn)我改變r(jià)ef的值</button>
  &nbsp;&nbsp;
  <button @click="changeReactiveVal">點(diǎn)我改變r(jià)eactive的值</button>
  &nbsp;&nbsp;
  <button @click="changeReactiveArr">點(diǎn)我改變r(jià)eactive的數(shù)組</button>
</template>

<script>
export default {
  name: "little",
  props: ["refNum", "reactiveNum", "reactiveArr"],
  setup (props, context) {
    // 改變 ref 的值
    const changeRefVal = () => {
      props.refNum++ // 報(bào)警告，不生效
    }
    // 改變 reactive 里面的值
    const changeReactiveVal = () => {
      props.reactiveNum++ // 報(bào)警告，不生效
    }
    // 改變 reactive 里面的數(shù)組
    const changeReactiveArr = () => {
      //   props.reactiveArr = [1, 2, 3, 4]  // 報(bào)警告，不生效
      props.reactiveArr.push(4) // 生效
    }
    return {
      changeRefVal,
      changeReactiveVal,
      changeReactiveArr
    }
  },
}
</script>

<style>
</style>