首页vue透传attributes

vue透传attributes

时间: 2023-08-28 20:20:56 浏览: 164

vue基本内容总结学习

### Vue.js 基本内容总结学习 #### 一、组件之间的通信 ##### 1.1 父子组件之间的通信在 Vue.js 中，父子组件间的通信是最常见的模式之一。这种通信通常遵循单向数据流的原则，即数据从父组件流向子组件。 **父组件向子组件传递数据** - **父组件示例代码** ```html <template> <div> <my-child :deliverParentAge="parentAge"></my-child> </div> </template> <script> import MyChild from "./Child"; export default { components: { MyChild }, data() { return { parentAge: 49 }; } }; </script> ``` - **子组件示例代码** ```html <template> <div class="my-child"> <h5>通过属性 props 接收父组件传过来的值是：{{ deliverParentAge }}</h5> </div> </template> <script> export default { data() { return { childAge: 27 }; }, props: { deliverParentAge: Number } }; </script> ``` 在父组件中，通过给子组件绑定 `deliverParentAge` 属性，并将其值设置为 `parentAge` (例如 49)。子组件通过 `props` 属性接收父组件传过来的值。 ##### 1.2 子父组件之间的通信子父组件间的通信可以通过自定义事件的方式实现。 **子组件向父组件传递数据** - **子组件示例代码** ```html <template> <div class="my-child"> <h5> <button @click="AddAge">加1</button> </h5> </div> </template> <script> export default { data() { return { childAge: 27 }; }, props: { deliverParentAge: Number }, computed: { parentActualAge() { return this.deliverParentAge + 1; } }, methods: { AddAge() { this.$emit("addParentAge", this.parentActualAge); } } }; </script> ``` - **父组件示例代码** ```html <template> <div class="my-parent"> <my-child :deliverParentAge="parentAge" @addParentAge="handleAddParentAge"></my-child> <h3>通过监听子组件提交的事件 addParentAge，实际年龄应该是: {{ parentAge + 1 }}</h3> </div> </template> <script> import MyChild from "./Child"; export default { components: { MyChild }, data() { return { parentAge: 49 }; }, methods: { handleAddParentAge(actualAge) { console.log("父组件的实际年龄是：", actualAge); } } }; </script> ``` 子组件通过 `$emit` 方法触发一个自定义事件 `addParentAge`，并将计算得到的 `parentActualAge` 作为参数传递给父组件。父组件监听这个事件，并通过回调函数 `handleAddParentAge` 处理传递的数据。 ##### 1.3 非父子组件间的通信非父子组件间通信可以使用中央事件总线（Event Bus）的方式来实现。 **中央事件总线示例代码** 1. **创建 Event Bus** ```javascript import Vue from 'vue'; export const EventBus = new Vue(); ``` 2. **组件 A 发送事件** ```javascript EventBus.$emit('some-event', 'data'); ``` 3. **组件 B 监听事件** ```javascript EventBus.$on('some-event', function(data) { // 处理数据 }); ``` ##### 1.4 路由传参在 Vue Router 中，可以通过两种方式传递参数：`params` 和 `query`。 - **params 示例代码** ```javascript this.$router.push({ name: 'user', params: { userId: 1 } }); ``` - **query 示例代码** ```javascript this.$router.push({ path: '/user', query: { userId: 1 } }); ``` #### 二、Vue 为什么采用异步渲染 Vue 的更新机制是基于组件级别的，这意味着只要组件中的任何一个数据发生变化，整个组件就会被重新渲染。为了提高性能，Vue 采用了异步渲染机制，即它会收集所有的变化，然后在一个事件循环结束后统一更新 DOM。这种方式减少了不必要的重绘，提高了应用的整体性能。 #### 三、Vue 双向数据绑定原理 Vue 的双向数据绑定主要依赖于 JavaScript 的 `Object.defineProperty()` 方法，以及观察者模式。 - **Object.defineProperty()** ```javascript Object.defineProperty(obj, prop, descriptor); ``` 其中： - `obj`: 需要定义属性的对象； - `prop`: 需要定义的属性； - `descriptor`: 属性的描述符。 **数据描述符** 包含以下可选键值： - `configurable`: 该属性是否可以被删除或其属性描述符是否可以被修改，默认为 `false`； - `enumerable`: 该属性是否可以在遍历属性时被枚举，默认为 `false`； - `value`: 属性对应的值，默认为 `undefined`； - `writable`: 属性值是否可以被修改，默认为 `false`。 **访问器描述符** 包含以下可选键值： - `configurable`: 同上； - `enumerable`: 同上； - `get`: 获取属性值的函数； - `set`: 设置属性值的函数。 Vue 使用这些特性来观察数据的变化，并自动更新视图。当数据发生变化时，Vue 会触发 `setter` 函数，从而触发视图的更新。以上就是关于 Vue.js 的基本内容总结学习，涵盖了组件通信、异步渲染以及双向数据绑定原理等方面的知识点。希望这些内容能够帮助读者更好地理解和掌握 Vue.js 的核心概念和技术细节。

在Vue中，透传attributes是指将除了props和emits之外的其他attribute传递给子组件。通过使用$attrs对象来访问这些透传的属性。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *2* [【Vue第十七章】透传 Attributes](https://blog.csdn.net/qq_39335404/article/details/128837950)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"] - *3* [Vue——透传 Attributes](https://blog.csdn.net/weixin_45721753/article/details/130173018)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]

阅读全文