vue2 deep穿透
时间: 2023-08-18 20:10:56 浏览: 67
在 Vue 2 中,可以使用 `deep` 修饰符来实现深度穿透,即在组件的嵌套层级中传递数据。
当你在子组件中使用 `v-model` 绑定一个对象时,通过给 `v-model` 添加 `deep` 修饰符,可以使得在子组件中修改对象的属性时,能够触发父组件中对应属性的更新。
下面是一个示例:
```html
<!-- 父组件 -->
<template>
<div>
<child-component v-model="data"></child-component>
</div>
</template>
<script>
import ChildComponent from './ChildComponent.vue';
export default {
data() {
return {
data: {
message: 'Hello',
},
};
},
components: {
ChildComponent,
},
};
</script>
```
```html
<!-- 子组件 ChildComponent.vue -->
<template>
<div>
<input v-model="localData.message">
</div>
</template>
<script>
export default {
props: ['value'],
data() {
return {
localData: this.value,
};
},
watch: {
localData: {
deep: true, // 添加 deep 修饰符
handler(newVal) {
this.$emit('input', newVal);
},
},
},
};
</script>
```
在上述示例中,父组件中的 `data` 对象通过 `v-model` 绑定到了子组件的 `value` 属性上。子组件中的输入框通过 `v-model` 绑定到了 `localData.message` 上。当你在子组件中修改输入框的值时,会触发子组件的 `watch` 监听器,然后通过 `$emit` 方法将更新后的值传递回父组件,从而实现了深度穿透。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)