- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
而Vue Composition API RFC Reference site watch
有许多高级使用场景模块, 上没有示例如何观看组件 Prop ?
Vue Composition API RFC's main page 中也没有提到它或 vuejs/composition-api in Github .
我创建了一个 Codesandbox来详细说明这个问题。
<template>
<div id="app">
<img width="25%" src="./assets/logo.png">
<br>
<p>Prop watch demo with select input using v-model:</p>
<PropWatchDemo :selected="testValue"/>
</div>
</template>
<script>
import { createComponent, onMounted, ref } from "@vue/composition-api";
import PropWatchDemo from "./components/PropWatchDemo.vue";
export default createComponent({
name: "App",
components: {
PropWatchDemo
},
setup: (props, context) => {
const testValue = ref("initial");
onMounted(() => {
setTimeout(() => {
console.log("Changing input prop value after 3s delay");
testValue.value = "changed";
// This value change does not trigger watchers?
}, 3000);
});
return {
testValue
};
}
});
</script>
<template>
<select v-model="selected">
<option value="null">null value</option>
<option value>Empty value</option>
</select>
</template>
<script>
import { createComponent, watch } from "@vue/composition-api";
export default createComponent({
name: "MyInput",
props: {
selected: {
type: [String, Number],
required: true
}
},
setup(props) {
console.log("Setup props:", props);
watch((first, second) => {
console.log("Watch function called with args:", first, second);
// First arg function registerCleanup, second is undefined
});
// watch(props, (first, second) => {
// console.log("Watch props function called with args:", first, second);
// // Logs error:
// // Failed watching path: "[object Object]" Watcher only accepts simple
// // dot-delimited paths. For full control, use a function instead.
// })
watch(props.selected, (first, second) => {
console.log(
"Watch props.selected function called with args:",
first,
second
);
// Both props are undefined so its just a bare callback func to be run
});
return {};
}
});
</script>
编辑 :虽然我的问题和代码示例最初是使用 JavaScript,但我实际上使用的是 TypeScript。托尼汤姆的第一个答案虽然有效,但会导致类型错误。 Michal Levý的回答解决了这个问题。所以我用
typescript
标记了这个问题然后。
<b-form-select>
之上的这个自定义选择组件的 react 布线的抛光但准系统版本来自
bootstrap-vue
(否则是不可知的实现,但这个底层组件确实会发出 @input 和 @change 事件,这取决于更改是通过编程方式还是通过用户交互进行的)。
<template>
<b-form-select
v-model="selected"
:options="{}"
@input="handleSelection('input', $event)"
@change="handleSelection('change', $event)"
/>
</template>
<script lang="ts">
import {
createComponent, SetupContext, Ref, ref, watch, computed,
} from '@vue/composition-api';
interface Props {
value?: string | number | boolean;
}
export default createComponent({
name: 'CustomSelect',
props: {
value: {
type: [String, Number, Boolean],
required: false, // Accepts null and undefined as well
},
},
setup(props: Props, context: SetupContext) {
// Create a Ref from prop, as two-way binding is allowed only with sync -modifier,
// with passing prop in parent and explicitly emitting update event on child:
// Ref: https://v2.vuejs.org/v2/guide/components-custom-events.html#sync-Modifier
// Ref: https://medium.com/@jithilmt/vue-js-2-two-way-data-binding-in-parent-and-child-components-1cd271c501ba
const selected: Ref<Props['value']> = ref(props.value);
const handleSelection = function emitUpdate(type: 'input' | 'change', value: Props['value']) {
// For sync -modifier where 'value' is the prop name
context.emit('update:value', value);
// For @input and/or @change event propagation
// @input emitted by the select component when value changed <programmatically>
// @change AND @input both emitted on <user interaction>
context.emit(type, value);
};
// Watch prop value change and assign to value 'selected' Ref
watch(() => props.value, (newValue: Props['value']) => {
selected.value = newValue;
});
return {
selected,
handleSelection,
};
},
});
</script>
最佳答案
如果你看一下 watch
输入 here 很明显 watch
的第一个参数可以是数组、函数或 Ref<T>
props
传递给 setup
函数是 react 对象(可能由 readonly(reactive())
制成,它的属性是 setter/getter 。所以你要做的是将 setter/getter 的值作为 watch
的第一个参数传递 - 在这种情况下是字符串“初始”。因为 Vue 2 $watch
API在引擎盖下使用(与 Vue 3 中的相同函数 exists),您实际上是在尝试在组件实例上查看名称为“initial”的不存在的属性。
您的回调只被调用一次,再也不会被调用。至少调用一次的原因是因为新的 watch
API 的行为类似于当前的 $watch
和 immediate
选项( 更新 03/03/2021 - 后来更改了,在 Vue 3 的发布版本中,watch
和以前一样懒惰在 Vue 2)
因此,您意外地做了托尼汤姆建议的相同事情,但值(value)错误。在这两种情况下,如果您使用的是 TypeScript,它都是无效的代码
你可以这样做:
watch(() => props.selected, (first, second) => {
console.log(
"Watch props.selected function called with args:",
first,
second
);
});
这里第一个函数由 Vue 立即执行以收集依赖项(以了解应该触发回调的内容),第二个函数是回调本身。
toRefs
转换 props 对象,因此它的属性将是
Ref<T>
类型,您可以将它们作为
watch
的第一个参数传递
props.xxx
(或
setup
),然后让 Vue 完成剩下的工作
关于javascript - 如何使用 Vue Composition API/Vue 3 观察 Prop 变化?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59125857/
我正在开始开发一个使用 JSF 2 作为 View 技术的新 Web 应用程序。 我之前没有使用 JSF 的经验,对这些概念有点困惑。 我阅读了一些关于 JSF 的文档,主要思想是它是一个基于组件的框
我试图找出这是一个 JSF/EL 问题还是这里出了什么问题。 基本上,我想将项目对象作为 ui:param 传递给 ui:composition 并在里面有一个按钮(即引导按钮,因此它们实际上是 ht
我是 GWT 的新手,正在尝试制作一个简单的应用程序(例如 fmylife 的小型版本)。到目前为止,我制作了一个加载事实的复合 Material 和另一个具有提交新事实的表单的复合 Material
我对 Agda 很陌生,我正在尝试做一个简单的证明“ map 的组合就是组合的 map ”。 (来自 this course 的练习) 相关定义: _=$=_ : {X Y : Set}{f f' :
我有三个组合(compFinal、compSlide1 和 compSlide2)。 我已经使用脚本将 compSlide1 和 compSlide2 添加到 compFinal 组合中。 我使用以下
我有以下情况: #{cc.attrs.someValue} 因此,在我的复合组件中,我正在调用其他一些复合组件,并尝试将提供给“主”复合组件的参数
我正在尝试使用 Constraint composition并希望为每个复合约束定义组,如下例所示:- 复合约束 @Target({ ElementType.FIELD, Elemen
尝试使用 Jetpack Compose 显示 AlertDialog,但应用程序在调用 AlertDialog 函数时崩溃,错误为 java.lang.IllegalStateException:
我想根据按钮的可见性属性重绘组合中的按钮。我根据其中的按钮进行合成以调整大小,并且我正在使用以下代码来刷新合成。问题:下面的代码工作正常,但按钮从未在复合中重新定位请帮忙。代码中是否缺少要重新定位的内
我正在研究 After Effects 脚本并使用 AE 脚本指南作为学习基础。 我有一个 After Effect 项目,其中包含两个 AE 项目,并且每个项目中都有多个项目。 我想从具有特定名称的
我一直在学习如何在 python 编程中实现组合,但我很难理解为什么它比继承更受欢迎。 例如,这是迄今为止我的代码: class Particle: # Constructor (public)
概述 是一种结构型模式,将对象以树形结构组织起来,以表示“部分 - 整体”的层次结构,使得客户端对单个对象和组合对象的使用具有唯一性。 UML类图 上面的类图包含的角色: Compone
我们已经尝试去定义类。定义类,就是新建了一种类型(type)。有了类,我们接着构造相应类型的对象。更进一步,每个类型还应该有一个清晰的接口(interface),供用户使用。 我们可以在一个新类的
一、Options API的弊端 Options api的一大特点就是在对应得属性中编写对应的模块。比如data定义数据、methods中定义方法、computed中定义计算属性、watch中监听属性
我正在使用 SWT ScrolledComposite,但是当我在 Windows 中滚动时,如果我快速滚动,我会出现一些撕裂/闪烁。我该怎么做才能加倍缓冲或减少这种影响,或者我该怎么做才能覆盖默认滚
在 JSP 和 JSTL 中我通常会做这样的事情: ${user.name} ${user.description}
几周以来,我们的 Web 应用程序出现了性能问题。首先我们认为问题属于大 DOM。大 DOM 并不是很好,但这不是主要的性能问题。 问题在于复合组件。过去几周,我们开发了核心复合组件,以减少代码冗余并
如何在 mySQL 中创建复合主键。在 table1 中,我需要将 id1、id2 设置为复合主键。我使用了这个查询。但它使每个成为主键。它检查每个条目的重复项 ALTER TABLE `table1
我是 Java 的新手,我想将背景图像添加到 Composite。我只能使用 SWT,不能使用 JFace。我正在使用 eclipse indigo IDE (3.8),当我想设置背景图像时,首先我将
我有一个程序必须使用复合键来管理对象。这个键,简单来说就是几个字符串。 我有以下代码: public struct MyKey { public string Part1 { get; set
我是一名优秀的程序员,十分优秀!