Vue - Vue3 组合 API 道具接收问题答案

【问题标题】：Vue - Vue3 composition API props receiving problemVue - Vue3 组合 API 道具接收问题
【发布时间】：2021-03-05 00:15:44
【问题描述】：

我无法在 Vue3 中工作： Counter1 向主 App 页面发出值，应用页面提供 Counter2 组件的 props（因此 Counter2 应该基本上显示 Counter1 发出的数据）：

https://codesandbox.io/s/priceless-ishizaka-md3el?file=/src/components/Counter2.vue

我无法让它工作，我想在 Counter2 中还有更多工作要做（我尝试了反应性对象等，但没有运气）。

我有一个用 Vue2（单页）编写的相同示例，您可以在此处查看：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
    <title></title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js"></script>
</head>
<body>

<div id="app">  
    <Counter1  @counted="handleCount"></Counter1>
    <Counter2 :received="clicksReceivedAndPassedToCounter2"></Counter2>
</div>

<script>

Vue.component('Counter1', {
 template: `<button @click="handleClick">Clicked {{ clicks }} times</button>`,
 data: () => ({
    clicks: 0
 }),
 methods: {
    handleClick() {
        this.clicks++;
        this.$emit('counted', this.clicks);
    }
 }
});  

Vue.component('Counter2', {
 template: `<p>Counter2 received: {{received}}</p>`,
 props: {
     'received': {
         type: Number,
         default: 0,
         required: true
     }
 }
}); 
 
new Vue({
    el: '#app',
    data() {
        return {
            clicksReceivedAndPassedToCounter2: 0
        }
    },
    methods: {
        handleCount(clicksReceived) {
            this.clicksReceivedAndPassedToCounter2 = clicksReceived;
        }
    }
});
 
</script>
</html>

【问题讨论】：

标签： vue.js vuejs3 vue-composition-api vue-props vue-events

【解决方案1】：

您没有在App 组件的模板中添加state：

  <Counter2 :received="clicksReceivedAndPassedToCounter2"></Counter2>

应该是：

    <Counter2 :received="state.clicksReceivedAndPassedToCounter2"></Counter2>

如果您想摆脱模板中的state 并保持反应性，您可以使用toRef 如下：

<template>
  <Counter1 @counted="handleCount"></Counter1>
  <p>Main page received: {{ valCounter2}}</p>
  <Counter2 :received="valCounter2"></Counter2>
</template>

<script>
import { reactive, toRef } from "vue";
import Counter1 from "./components/Counter1.vue";
import Counter2 from "./components/Counter2.vue";
export default {
  name: "App",
  components: {
    Counter1,
    Counter2,
  },
  setup() {
    const state = reactive({
      clicksReceivedAndPassedToCounter2: 0,
    });
    function handleCount(clicksReceived) {
      state.clicksReceivedAndPassedToCounter2 = clicksReceived;
    }
    return {
      valCounter2: toRef(
        state,
        "clicksReceivedAndPassedToCounter2"
      ),
      handleCount,
    };
  },
};
</script>

【讨论】：

谢谢！你拯救了我拉的很多头发:)
不客气，请再次检查我的答案，我添加了一些可能有用的细节