Vue3.0中setup 函数传数

父传子

<template>
  <h1>父组件</h1>
  <p>{{ money }}</p>
  <hr />
  <!-- 1. 父组件通过自定义属性提供数据 -->
  <Son :money="money" />
</template>
<script>
  import { ref } from 'vue'
  import Son from './Son.vue'
  export default {
    name: 'App',
    components: {
      Son
    },
    setup() {
      const money = ref(100)
      return { money }
    }
  }
</script>

<template>
  <h1>子组件</h1>
  <p>{{ money }}</p>
</template>
<script>
  export default {
    name: 'Son',
    // 2. 子组件通过 props 进行接收，在模板中就可以使用啦
    props: {
      money: {
        type: Number,
        default: 0
      }
    },
    setup(props) {
      // 3. setup 中也可以通过形参 props 来获取传递的数据
      console.log(props.money)
    }
  }
</script>

子传父

<template>
  <h1>父组件</h1>
  <p>{{ money }}</p>
  <hr />
  <Son :money="money" @change-money="updateMoney" />
</template>
<script>
  import { ref } from 'vue'
  import Son from './Son.vue'
  export default {
    name: 'App',
    components: {
      Son
    },
    setup() {
      const money = ref(100)
      // #1 父组件准备修改数据的方法并提供给子组件
      const updateMoney = (newMoney) => {
        money.value -= newMoney
      }
      return { money, updateMoney }
    }
  }
</script>

<template>
  <h1>子组件</h1>
  <p>{{ money }}</p>
  <button @click="changeMoney(1)">花 1 元</button>
</template>
<script>
  export default {
    name: 'Son',
    props: {
      money: {
        type: Number,
        default: 0
      }
    },
    emits: ['change-money'],
    setup(props, { emit }) {
      // attrs 捡漏、slots 插槽
      const changeMoney = (m) => {
        // #2 子组件通过 emit 进行触发
        emit('change-money', m)
      }
      return { changeMoney }
    }
  }
</script>

provide/inject

📝 把 App.vue 中的数据传递给孙组件，Child.vue。

<template>
  <div class="container">
    <h2>App {{ money }}</h2>
    <button @click="money = 1000">发钱</button>
    <hr />
    <Parent />
  </div>
</template>
<script>
  import { provide, ref } from 'vue'
  import Parent from './Parent.vue'
  export default {
    name: 'App',
    components: {
      Parent
    },
    setup() {
      // 提供数据
      const money = ref(100)
      provide('money', money)
      // 提供修改数据的方法
      const changeMoney = (m) => (money.value -= m)
      provide('changeMoney', changeMoney)
      return { money }
    }
  }
</script>

<template>
  <div>
    Parent
    <hr />
    <Child />
  </div>
</template>

<script>
  import Child from './Child.vue'
  export default {
    components: {
      Child
    }
  }
</script>

<template>
  <div>
    Child
    <p>{{ money }}</p>
    <button @click="changeMoney(1)">花 1 块钱</button>
  </div>
</template>

<script>
  import { inject } from 'vue'
  export default {
    setup() {
      const money = inject('money')
      const changeMoney = inject('changeMoney')
      return { money, changeMoney }
    }
  }
</script>