小编Ker*_*mes的帖子

我正在尝试使用computedVueJs 中的字段。

以前可以通过以下方式实现：

{
  props: {
    left: 5,
    right: 100,
  },
  computed: {
    width: () {return this.right.value - this.left.value};
  }
}

但是使用新的 SFC/Composition 语法我该怎么做呢？

<script setup>
defineProps({left: 5, right: 100});

defineComputed(  //??
)
</script>

我已阅读此链接，但它没有解释它： https ://github.com/vuejs/rfcs/blob/master/active-rfcs/0040-script-setup.md

我想在 Vue3 组件中嵌入一个复选框，并将v-model绑定传递给该复选框。

组件内部：

<!-- Tile.vue -->
<template>
  <div>
    <input type=checkbox v-model="$attrs">
  </div>
</template>
<script>
export default {inheritAttrs: false}
</script>

然后在外部文件中：

<template>
<Tile value="carrot" v-model="foods" />
<Tile value="tomatoes" v-model="foods" />
</template>
<script setup>
var foods = ref([]);
</script>

我该如何实现这一目标？

文档说这v-model只是:modelValueand的简写@update:modelValue，但这并不通用，因为 Vue 对于表单元素的行为显然有所不同，例如智能地监听onchange而不是oninput修改属性checked而不是value依赖于节点。

如果我v-model在外部组件上使用，如何将其转发到复选框并获得与 Vue 相同的智能行为？