组件 v-model - 版本历史

2023年3月29日 (三) 04:36 Eijux

2023-03-29T04:36:23Z

@@ 第9行： / 第9行： @@
   首先，需要理解 v-model 的'''等价形式'''（或者说'''展开形式'''）。
-将 v-model 应用于组件时：
+与“原生元素”类似<ref>
 : <syntaxhighlight lang="HTML" highlight="">
 <CustomInput v-model="searchText" />
@@ 第171行： / 第183行： @@
 </syntaxhighlight>
-== '''v-model：自定义修饰符''' ==
+== '''v-model：自定义修饰符<ref>对于“指令及其修饰符”的理解，参考：[https://cn.vuejs.org/guide/reusability/custom-directives.html Vue.js：《自定义指令》]</ref>''' ==
   v-model 有一些内置的修饰符，例如 <code>.trim</code>，<code>.number</code> 和 <code>.lazy</code>。
@@ 第240行： / 第252行： @@
 </syntaxhighlight>
-== 附 ==
+== 参考 ==
-在“原生元素”上：
+<references/>

Eijux：/* v-model 用于组件 */

2023-03-28T12:45:10Z

v-model 用于组件

←上一版本		2023年3月28日 (二) 20:45的版本
第6行：		第6行：
	有点绕，做个笔记		有点绕，做个笔记

	== '''v-model ~~用于组件~~''' ==		== '''组件的 v-model 实现''' ==
	首先，需要理解 v-model 的'''等价形式'''（或者说'''展开形式'''）。		首先，需要理解 v-model 的'''等价形式'''（或者说'''展开形式'''）。

第30行：		第30行：
	# <span style="color: blue">声明“'''事件 update:modelValue'''”，并让 <code><input></code> 的“'''input 事件'''”用“<code><input></code> 的新值”触发该事件。</span>		# <span style="color: blue">声明“'''事件 update:modelValue'''”，并让 <code><input></code> 的“'''input 事件'''”用“<code><input></code> 的新值”触发该事件。</span>

	=== ~~子组件的实现（~~'''方式一'''） ===		=== 组件的实现（'''方式一'''） ===
	依据“展开形式”实现子组件，如下：		依据“展开形式”实现子组件，如下：
	: <syntaxhighlight lang="HTML" highlight="">		: <syntaxhighlight lang="HTML" highlight="">
第50行：		第50行：
	# 监听 <code><input></code> 的“input 事件”，以携带“<code><input></code>的新值”（即，<code>$event.target.value</code>）触发“update:modelValue”。		# 监听 <code><input></code> 的“input 事件”，以携带“<code><input></code>的新值”（即，<code>$event.target.value</code>）触发“update:modelValue”。

	=== ~~子组件的实现（~~'''方式二'''） ===		=== 组件的实现（'''方式二'''） ===
	以“v-model”替换该“展开形式”实现子组件，如下：		以“v-model”替换该“展开形式”实现子组件，如下：
	: <syntaxhighlight lang="HTML" highlight="">		: <syntaxhighlight lang="HTML" highlight="">

Eijux：/* v-model：自定义修饰符 */

2023-03-28T12:44:04Z

v-model：自定义修饰符

←上一版本		2023年3月28日 (二) 20:44的版本
第178行：		第178行：
	v-model 自定义修饰符：		v-model 自定义修饰符：
	# “自定义修饰符”可以通过在 <code>defineProps</code> 中定义 prop 来捕获。		# “自定义修饰符”可以通过在 <code>defineProps</code> 中定义 prop 来捕获。
	#* 对于默认 ~~prop“modelValue”，定义“修饰符 prop”为“modelModifiers”~~		#* 对于默认 prop“'''modelValue'''”，定义“修饰符 prop”为“'''modelModifiers'''”
	#* 对于其他 prop，定义“修饰符 prop”为“prop名称 + Modifiers” —— ~~如：title~~ 的“修饰符 prop”为 titleModifiers		#* 对于其他 prop，定义“修饰符 prop”为“prop名称 + Modifiers” —— 如：'''title''' 的“修饰符 prop”为 '''titleModifiers'''
	# “自定义修饰符”的效果，可以套在 <code><input></code> 的事件处理外完成。		# “自定义修饰符”的效果，可以套在 <code><input></code> 的事件处理外完成。

2023年3月28日 (二) 12:42 Eijux

2023-03-28T12:42:59Z

←上一版本		2023年3月28日 (二) 20:42的版本
第7行：		第7行：

	== '''v-model 用于组件''' ==		== '''v-model 用于组件''' ==
	首先，需要理解 v-model 的'''等价形式'''。		首先，需要理解 v-model 的'''等价形式'''（或者说'''展开形式'''）。

	~~在组件上：~~		将 v-model 应用于组件时：
	: <syntaxhighlight lang="HTML" highlight="">		: <syntaxhighlight lang="HTML" highlight="">
	<CustomInput v-model="searchText" />		<CustomInput v-model="searchText" />
第23行：		第23行：
	<big>👉</big>相当于：将子组件的属性“modelValue”绑定到响应式状态 searchText，并监听事件“update:modelValue”以新值替换 searchText		<big>👉</big>相当于：将子组件的属性“modelValue”绑定到响应式状态 searchText，并监听事件“update:modelValue”以新值替换 searchText

	* '''modelValue'''：展开时，默认的“prop” ——【也是子组件需要定义的 prop】
	** 如果子组件中指定了其他 prop，则使用时需要'''指明 v-model 使用的 prop'''：'''<syntaxhighlight lang="bash" inline><MyComponent v-model:otherProp="searchText" /></syntaxhighlight>'''
	* '''update:modelValue'''：展开时，默认的“触发事件” ——【也是子组件需要定义的 emit】

			不需要考虑背后是什么原理，<span style="color: blue; font-size:120%">'''只需要根据该形式，完成子组件即可'''</span>。
	~~把这个“展开形式”理解为类源码实现，~~<span style="color: blue; font-size:120%">'''~~子组件只需要根据该形式实现即可~~'''</span>。

	<big>💡</big>所以，子组件中需要：		<big>💡</big>所以，子组件中需要：
	# <span style="color: blue">声明“'''属性 modelValue'''”，并将 <code><input></code> 的“'''value 属性'''”绑定到该属性；</span>		# <span style="color: blue">声明“'''属性 modelValue'''”，并将 <code><input></code> 的“'''value 属性'''”绑定到该属性；</span>
	# <span style="color: blue">声明“'''事件 update:modelValue'''~~”，并使~~ <code><input></code> 的“'''input 事件'''~~”携带“~~<code><input></code> 的新值”触发该事件。</span>		# <span style="color: blue">声明“'''事件 update:modelValue'''”，并让 <code><input></code> 的“'''input 事件'''”用“<code><input></code> 的新值”触发该事件。</span>

	=== 子组件的实现（'''方式一'''） ===		=== 子组件的实现（'''方式一'''） ===
第84行：		第80行：
	# 将<code><input></code>双向绑定到“value”。		# 将<code><input></code>双向绑定到“value”。

	== 多个 v-~~model 用于组件~~ ==		== '''v-model：参数''' ==
	~~对于“存在多个~~ <~~code><input~~></~~code~~> ~~的子组件”，需要使用多个 v-model，且需指明 v-model 分别作用与“子组件哪个属性”。~~		v-model 的参数，用于指定<span style="color: blue">'''v-model 绑定于“组件的哪个 prop”'''</span>

	~~【原理同上一节】~~		——【是否使用参数，需要根据组件实现来定（组件的 <input> 的 value 绑定于哪个 prop）】
			——【v-model 默认绑定于组件的“'''modelValue'''”属性，其对应的事件为“'''update:modelValue'''”】（如上节）

			类似的：
			: <syntaxhighlight lang="HTML" highlight="">
			<CustomInput v-model:pram="searchText" />

			: 会被展开为：

			<CustomInput
			:theSpecialProp="searchText"
			@update:theSpecialProp="newValue => searchText = newValue"
			/>
			</syntaxhighlight>

			=== '''多 v-model 绑定''' ===
			对于“存在多个 <code><input></code> 的子组件”，只需要使用多个“'''带参数的 v-model'''”，以分别与子组件的 prop 绑定即可。

			【两种写法，同上一节】

	对于：		对于：
第96行：		第110行：
	/>		/>
	</syntaxhighlight>		</syntaxhighlight>
	~~子组件的实现如下。~~		子组件的实现（'''方式一'''）：

	~~=== 子组件的实现（方式一） ===~~
	: <syntaxhighlight lang="HTML" highlight="">		: <syntaxhighlight lang="HTML" highlight="">
	<script setup>		<script setup>
第122行：		第134行：
	</template>		</template>
	</syntaxhighlight>		</syntaxhighlight>
			子组件的实现（'''方式二'''）：
	~~=== 子组件的实现（方式二） ===~~
	: <syntaxhighlight lang="HTML" highlight="">		: <syntaxhighlight lang="HTML" highlight="">
	<script setup>		<script setup>
第160行：		第171行：
	</syntaxhighlight>		</syntaxhighlight>

	== '''~~自定义~~ v-~~model 修饰符~~''' ==		== '''v-model：自定义修饰符''' ==
	v-model 有一些内置的修饰符，例如 <code>.trim</code>，<code>.number</code> 和 <code>.lazy</code>。		v-model 有一些内置的修饰符，例如 <code>.trim</code>，<code>.number</code> 和 <code>.lazy</code>。

Eijux：/* v-model 用于组件 */

2023-03-28T11:57:33Z

v-model 用于组件

←上一版本		2023年3月28日 (二) 19:57的版本
第6行：		第6行：
	有点绕，做个笔记		有点绕，做个笔记

	== v-model 用于组件 ==		== '''v-model 用于组件''' ==
	首先，需要理解 v-model 的'''等价形式'''。		首先，需要理解 v-model 的'''等价形式'''。

第34行：		第34行：
	# <span style="color: blue">声明“'''事件 update:modelValue'''”，并使 <code><input></code> 的“'''input 事件'''”携带“<code><input></code> 的新值”触发该事件。</span>		# <span style="color: blue">声明“'''事件 update:modelValue'''”，并使 <code><input></code> 的“'''input 事件'''”携带“<code><input></code> 的新值”触发该事件。</span>

	=== ~~子组件的实现（方式一）~~ ===		=== 子组件的实现（'''方式一'''） ===
	依据“展开形式”实现子组件，如下：		依据“展开形式”实现子组件，如下：
	: <syntaxhighlight lang="HTML" highlight="">		: <syntaxhighlight lang="HTML" highlight="">
第54行：		第54行：
	# 监听 <code><input></code> 的“input 事件”，以携带“<code><input></code>的新值”（即，<code>$event.target.value</code>）触发“update:modelValue”。		# 监听 <code><input></code> 的“input 事件”，以携带“<code><input></code>的新值”（即，<code>$event.target.value</code>）触发“update:modelValue”。

	=== ~~子组件的实现（方式二）~~ ===		=== 子组件的实现（'''方式二'''） ===
	以“v-model”替换该“展开形式”实现子组件，如下：		以“v-model”替换该“展开形式”实现子组件，如下：
	: <syntaxhighlight lang="HTML" highlight="">		: <syntaxhighlight lang="HTML" highlight="">

Eijux：/* 附 */

2023-03-28T11:56:42Z

附

@@ 第157行： / 第157行： @@
    <input type="text" v-model="computedFirstName"/>
    <input type="text" v-model="computedLastName"/>
 </template>
 </syntaxhighlight>

Eijux：创建页面，内容为“category:Vue == 关于 == 参考：[https://cn.vuejs.org/guide/components/v-model.html Vue官方文档：《组件 v-model》] 有点绕，做个笔记 == v-model 用于组件 == 首先，需要理解 v-model 的'''等价形式'''。在组件上： : : 会被展开为： : category:Vue == 关于 == 参考：[https://cn.vuejs.org/guide/components/v-model.html Vue官方文档：《组件 v-model》] 有点绕，做个笔记 == v-model 用于组件 == 首先，需要理解 v-model 的'''等价形式'''。在组件上： : <syntaxhighlight lang="HTML" highlight=""> <CustomInput v-model="searchText" /> </syntaxhighlight> : 会被展开为： : <syntaxhighlight lang="HTML" highlight=""> <CustomInput :modelValue="searchTe…”

新页面
[[category:Vue]]

== 关于 ==
参考：[https://cn.vuejs.org/guide/components/v-model.html Vue官方文档：《组件 v-model》]

有点绕，做个笔记

== v-model 用于组件 ==
首先，需要理解 v-model 的'''等价形式'''。

在组件上：
: <syntaxhighlight lang="HTML" highlight="">
<CustomInput v-model="searchText" />
</syntaxhighlight>
: 会被展开为：
: <syntaxhighlight lang="HTML" highlight="">
<CustomInput
:modelValue="searchText"
@update:modelValue="newValue => searchText = newValue"
/>
</syntaxhighlight>

<big>👉</big>相当于：将子组件的属性“modelValue”绑定到响应式状态 searchText，并监听事件“update:modelValue”以新值替换 searchText

* '''modelValue'''：展开时，默认的“prop” ——【也是子组件需要定义的 prop】
** 如果子组件中指定了其他 prop，则使用时需要'''指明 v-model 使用的 prop'''：'''<syntaxhighlight lang="bash" inline><MyComponent v-model:otherProp="searchText" /></syntaxhighlight>'''
* '''update:modelValue'''：展开时，默认的“触发事件” ——【也是子组件需要定义的 emit】

把这个“展开形式”理解为类源码实现，<span style="color: blue; font-size:120%">'''子组件只需要根据该形式实现即可'''</span>。

<big>💡</big>所以，子组件中需要：
# <span style="color: blue">声明“'''属性 modelValue'''”，并将 <code><input></code> 的“'''value 属性'''”绑定到该属性；</span>
# <span style="color: blue">声明“'''事件 update:modelValue'''”，并使 <code><input></code> 的“'''input 事件'''”携带“<code><input></code> 的新值”触发该事件。</span>

=== 子组件的实现（方式一） ===
依据“展开形式”实现子组件，如下：
: <syntaxhighlight lang="HTML" highlight="">
<script setup>
defineProps(['modelValue'])
defineEmits(['update:modelValue'])
</script>

<template>
<input
:value="modelValue"
@input="$emit('update:modelValue', $event.target.value)"
/>
</template>
</syntaxhighlight>
如上：
# 声明“属性 modelValue”和“事件 update:modelValue”；
# 将 <code><input></code> 的“value 属性”绑定到“modelValue”；
# 监听 <code><input></code> 的“input 事件”，以携带“<code><input></code>的新值”（即，<code>$event.target.value</code>）触发“update:modelValue”。

=== 子组件的实现（方式二） ===
以“v-model”替换该“展开形式”实现子组件，如下：
: <syntaxhighlight lang="HTML" highlight="">
<script setup>
import { computed } from 'vue'

const props = defineProps(['modelValue'])
const emit = defineEmits(['update:modelValue'])

const value = computed({
get() {
return props.modelValue
},
set(value) {
emit('update:modelValue', value)
}
})
</script>

<template>
<input v-model="value" />
</template>
</syntaxhighlight>
如上：
# 声明“属性 modelValue”和“事件 update:modelValue”
# 提供'''计算属性'''“value”：
## 其 getter 用于：获取“modelValue”；
## 其 setter 用于：用 value 触发“update:modelValue”
# 将<code><input></code>双向绑定到“value”。

== 多个 v-model 用于组件 ==
对于“存在多个 <code><input></code> 的子组件”，需要使用多个 v-model，且需指明 v-model 分别作用与“子组件哪个属性”。

【原理同上一节】

对于：
: <syntaxhighlight lang="HTML" highlight="">
<UserName
v-model:first-name="first"
v-model:last-name="last"
/>
</syntaxhighlight>
子组件的实现如下。

=== 子组件的实现（方式一） ===
: <syntaxhighlight lang="HTML" highlight="">
<script setup>
defineProps({
firstName: String,
lastName: String
})

defineEmits(['update:firstName', 'update:lastName'])
</script>

<template>
<input
type="text"
:value="firstName"
@input="$emit('update:firstName', $event.target.value)"
/>
<input
type="text"
:value="lastName"
@input="$emit('update:lastName', $event.target.value)"
/>
</template>
</syntaxhighlight>

=== 子组件的实现（方式二） ===
: <syntaxhighlight lang="HTML" highlight="">
<script setup>
import { computed } from 'vue'

const props = defineProps({
firstName: String,
lastName: String
})

const emit = defineEmits(['update:firstName', 'update:lastName'])

const computedFirstName = computed({
get() {
return props.firstName
},
set(computedFirstName) {
emit('update:firstName', computedFirstName)
}
})

const computedLastName = computed({
get() {
return props.lastName
},
set(computedLastName) {
emit('update:lastName', computedLastName)
}
})
</script>

<template>
<input type="text" v-model="computedFirstName"/>
<input type="text" v-model="computedLastName"/>
</template>
</syntaxhighlight>

== 附 ==
在“原生元素”上：
: <syntaxhighlight lang="HTML" highlight="">
<input v-model="searchText" />
</syntaxhighlight>
会被展开为：
: <syntaxhighlight lang="HTML" highlight="">
<input
:value="searchText"
@input="searchText = $event.target.value"
/>
</syntaxhighlight>

组件 v-model - 版本历史

2023年3月29日 (三) 04:36 Eijux

Eijux：​/* v-model 用于组件 */

Eijux：​/* v-model：自定义修饰符 */

2023年3月28日 (二) 12:42 Eijux

Eijux：​/* v-model 用于组件 */

Eijux：​/* 附 */

Eijux：/* v-model 用于组件 */

Eijux：/* v-model：自定义修饰符 */

Eijux：/* v-model 用于组件 */

Eijux：/* 附 */