保持单向数据流
大家都知道vue是单项数据流的，子组件不能直接修改父组件传过来的props，但是在我们封装组件使用v-model时，不小心就会打破单行数据流的规则，例如下面这样：
<!-- 父组件 -->
<my-component v-model="msg"></my-component>
<!-- 子组件 -->
<template>
<div>
<el-input v-model="msg"></el-input>
</div>
</template>
<script setup>
defineOptions({
name: "my-component",
});
const props = defineProps({
msg: {
type: String,
default: "",
},
});
</script>
v-model实现原理
直接在子组件上修改props的值，就打破了单向数据流，那我们该怎么做呢，先看下v-model的实现原理：
<!-- 父组件 -->
<template>
<my-component v-model="msg"></my-component>
<!-- 等同于 -->
<my-component :modelValue="msg" @update:modelValue="msg = $event"></my-component>
</template>
emit通知父组件修改prop值
所以，我们可以通过emit，子组件的值变化了，不是直接修改props,而是通知父组件去修改该值!
子组件值修改，触发父组件的update:modelValue事件，并将新的值传过去，父组件将msg更新为新的值，代码如下：
<!-- 父组件 -->
<template>
<my-component v-model="msg"></my-component>
<!-- 等同于 -->
<my-component :modelValue="msg" @update:modelValue="msg = $event"></my-component>
</template>
<script setup>
import { ref } from 'vue'
const msg = ref('hello')
</script>
<!-- 子组件 -->
<template>
<el-input :modelValue="modelValue" @update:modelValue="handleValueChange"></el-input>
</template>
<script setup>
const props = defineProps({
modelValue: {
type: String,
default: '',
}
});
const emit = defineEmits(['update:modelValue']);
const handleValueChange = (value) => {
// 子组件值修改，触发父组件的update:modelValue事件，并将新的值传过去，父组件将msg更新为新的值
emit('update:modelValue', value)
}
</script>
这也是大多数开发者封装组件修改值的方法，其实还有另一种方案，就是利用计算数据的get、set
computed 拦截prop
大多数同学使用计算属性，都是用get，或许有部分同学甚至不知道计算属性还有set，下面我们看下实现方式吧：
<!-- 父组件 -->
<script setup>
import myComponent from "./components/MyComponent.vue";
import { ref } from "vue";
const msg = ref('hello')
</script>
<template>
<div>
<my-component v-model="msg"></my-component>
</div>
</template>
<!-- 子组件 -->
<template>
<el-input v-model="msg"></el-input>
</template>
<script setup>
import { computed } from "vue";
const props = defineProps({
modelValue: {
type: String,
default: "",
},
});
const emit = defineEmits(["update:modelValue"]);
const msg = computed({
// getter
get() {
return props.modelValue
},
// setter
set(newValue) {
emit('update:modelValue',newValue)
},
});
</script>
v-model绑定对象
那么当v-model绑定的是对象呢？
可以像下面这样，computed拦截多个值
<!-- 父组件 -->
<script setup>
import myComponent from "./components/MyComponent.vue";
import { ref } from "vue";
const form = ref({
name:'张三',
age:18,
sex:'man'
})
</script>
<template>
<div>
<my-component v-model="form"></my-component>
</div>
</template>
<!-- 子组件 -->
<template>
<div>
<el-input v-model="name"></el-input>
<el-input v-model="age"></el-input>
<el-input v-model="sex"></el-input>
</div>
</template>
<script setup>
import { computed } from "vue";
const props = defineProps({
modelValue: {
type: Object,
default: () => {},
},
});
const emit = defineEmits(["update:modelValue"]);
const name = computed({
// getter
get() {
return props.modelValue.name;
},
// setter
set(newValue) {
emit("update:modelValue", {
...props.modelValue,
name: newValue,
});
},
});
const age = computed({
get() {
return props.modelValue.age;
},
set(newValue) {
emit("update:modelValue", {
...props.modelValue,
age: newValue,
});
},
});
const sex = computed({
get() {
return props.modelValue.sex;
},
set(newValue) {
emit("update:modelValue", {
...props.modelValue,
sex: newValue,
});
},
});
</script>
这样是可以实现我们的需求，但是一个个手动拦截v-model对象的属性值，太过于麻烦，假如有10个输入，我们就需要拦截10次，所以我们需要将拦截整合起来！
监听整个对象
<!-- 父组件 -->
<script setup>
import myComponent from "./components/MyComponent.vue";
import { ref } from "vue";
const form = ref({
name:'张三',
age:18,
sex:'man'
})
</script>
<template>
<div>
<my-component v-model="form"></my-component>
</div>
</template>
<!-- 子组件 -->
<template>
<div>
<el-input v-model="form.name"></el-input>
<el-input v-model="form.age"></el-input>
<el-input v-model="form.sex"></el-input>
</div>
</template>
<script setup>
import { computed } from "vue";
const props = defineProps({
modelValue: {
type: Object,
default: () => {},
},
});
const emit = defineEmits(["update:modelValue"]);
const form = computed({
get() {
return props.modelValue;
},
set(newValue) {
alert(123)
emit("update:modelValue", newValue);
},
});
</script>
这样看起来很完美，但是，我们在set中alert(123),它却并未执行！！
原因是：form.xxx = xxx时，并不会触发computed的set，只有form = xxx时，才会触发set
Proxy代理对象
那么，我们需要想一个办法，在form的属性修改时，也能emit("update:modelValue", newValue);，为了解决这个问题，我们可以通过Proxy代理
<!-- 父组件 -->
<script setup>
import myComponent from "./components/MyComponent.vue";
import { ref, watch } from "vue";
const form = ref({
name: "张三",
age: 18,
sex: "man",
});
watch(form, (newValue) => {
console.log(newValue);
});
</script>
<template>
<div>
<my-component v-model="form"></my-component>
</div>
</template>
<!-- 子组件 -->
<template>
<div>
<el-input v-model="form.name"></el-input>
<el-input v-model="form.age"></el-input>
<el-input v-model="form.sex"></el-input>
</div>
</template>
<script setup>
import { computed } from "vue";
const props = defineProps({
modelValue: {
type: Object,
default: () => {},
},
});
const emit = defineEmits(["update:modelValue"]);
const form = computed({
get() {
return new Proxy(props.modelValue, {
get(target, key) {
return Reflect.get(target, key);
},
set(target, key, value,receiver) {
emit("update:modelValue", {
...target,
[key]: value,
});
return true;
},
});
},
set(newValue) {
emit("update:modelValue", newValue);
},
});
</script>
这样，我们就通过了Proxy + computed完美拦截了v-model的对象!
然后，为了后面使用方便，我们直接将其封装成hook
// useVModel.js
import { computed } from "vue";
export default function useVModle(props, propName, emit) {
return computed({
get() {
return new Proxy(props[propName], {
get(target, key) {
return Reflect.get(target, key)
},
set(target, key, newValue) {
emit('update:' + propName, {
...target,
[key]: newValue
})
return true
}
})
},
set(value) {
emit('update:' + propName, value)
}
})
}
<!-- 子组件使用 -->
<template>
<div>
<el-input v-model="form.name"></el-input>
<el-input v-model="form.age"></el-input>
<el-input v-model="form.sex"></el-input>
</div>
</template>
<script setup>
import useVModel from "../hooks/useVModel";
const props = defineProps({
modelValue: {
type: Object,
default: () => {},
},
});
const emit = defineEmits(["update:modelValue"]);
const form = useVModel(props, "modelValue", emit);
</script>作者：八月十八
链接：https://juejin.cn/post/7277089907974422588
指令式编程 VS 声明式编程
指令式编程：告诉机器该如何做，并得到自己想要的结果。声明式编程：告诉机器您想得到什么，让机器自己计算该如何做。
vue内置指令大全_整理常用的Vue内置指令
整理vue常用的内置指令:v-bind指令、v-text指令、v- html指令、v-show指令、v-if指令、v-else 指令、v-else-if 指令、v-for 指令、v-on 指令、v-model 指令、v-once 指令、v-cloak指令、v-pre指令
如何在Vue里建立长按指令
本文将解释如何通过按下（或按住）按钮来执行功能和删除输入。首先，我将解释如何在VanillaJS中实现这一目标。然后，为它创建一个Vue指令。那么，让我们开始吧。
深入解析Vue.directive 自定义指令
全局API并不在构造器里，而是先声明全局变量或者直接在Vue上定义一些新功能，Vue内置了一些全局API，比如我们今天要学习的指令Vue.directive。说的简单些就是，在构造器外部用Vue提供给我们的API函数来定义新的功能。
VUE指令大全
v-text主要用来更新textContent，可以等同于JS的text属性。v-html双大括号的方式会将数据解释为纯文本，而非HTML。为了输出真正的HTML，可以用v-html指令。它等同于JS的innerHtml属性。
Vue中的全部指令
可以用方括号括起来的 JavaScript 表达式作为一个指令的参数：动态参数预期会求出一个字符串，异常情况下值为 null。这个特殊的 null 值可以被显性地用于移除绑定。任何其它非字符串类型的值都将会触发一个警告。
vue v-for 使用问题Error in render
今天使用v-for指令的时候遇到一个错误：[Vue warn]: Error in render: \\\"TypeError: Cannot read property \\\'children\\\' of undefined\\\"，猜测使用了嵌套属性的原因，在页面中无法解析出具体属性值
Vue.js 自定义指令使用场景及案例
使用场景：代码复用和抽象的主要形式是组件；当需要对普通 DOM 元素进行底层操作，此时就会用到自定义指令；但是，对于大幅度的 DOM 变动，还是应该使用组件
Vue中插槽指令
意义就是在组件里留着差值方便后续组件内容新增，而且由于插件是写在父级中数据可以直接父级中传输而不需要传子再传父有些情况会减少写代码量，组件里没有设置插件名称,页面中插槽中写了插槽名称 结果页面中插槽不会被渲染
Vue常用指令
vue.js官方给自己的定为是数据模板引擎，并给出了一套渲染数据的指令。本文详细介绍了vue.js的常用指令。Vue.js 使用了基于 HTML 的模板语法最简单的使用vue的方式是渲染数据，渲染数据最常见的形式就是
内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!