Vue--API--实例的属性

小咪咪 2022-12-22 04:54 161阅读 0赞

原文网址：[Vue--API--实例的属性\_IT利刃出鞘的博客-CSDN博客][Vue--API--_IT_-CSDN]

# $attrs #

**其他网址**

> [vue中$attrs你会用吗？][vue_attrs]  
> [vm.$attrs 【Vue 2.4.0新增inheritAttrs，attrs详解】 - 简书][vm._attrs _Vue 2.4.0_inheritAttrs_attrs_ -]

**简介**

> $attrs 可以收集父组件中的所有传过来的属性。（不包括这两项：1.class和style属性 2.在组件中没有通过 props 定义的）。
> 
> $attrs 可以很方便的做到属性透传，使用起来也比较简单，避免了多写 props 的痛苦。面试的时候也经常会问到父子组件通讯的方式有哪些，那么 props 和 $attrs 都是可以的。

**实例**

> 有三个组件A-B-C，然后想A中的属性传入C中。法1：一层一层通过props往下传递。法2：通过$attrs传递。本处使用$attrs传递。
> 
> **components/CompA.vue**
> 
>     <template>
>       <div id="compA">
>         <comp-b :prop1="aa"
>                 :prop2="bb"
>                 :prop3="cc">
>         </comp-b>
>       </div>
>     </template>
>     <script>
>     import CompB from "@/components/CompB";
>     
>     export default {
>       components: {CompB},
>       data() {
>         return {
>           aa: 'aa',
>           bb: 'bb',
>           cc: 'cc'
>         };
>       },
>     };
>     </script>
> 
> **components/CompB**
> 
>     <template>
>       <div class="compB">
>         <p>in compB</p>
>         <p>props: {
>         {prop1}}</p>
>         <p>$attrs: {
>         {$attrs}}</p>
>         <hr>
>         <comp-c v-bind="$attrs"></comp-c>
>       </div>
>     </template>
>     <script>
>     import CompC from "@/components/CompC";
>     export default {
>       props: ['prop1'],
>       components: { CompC },
>     };
>     </script>
> 
> **component/CompC**
> 
>     <template>
>       <div class="compC">
>         <p>in compC</p>
>         <p>props: {
>         {prop2}}</p>
>         <p>$attrs: {
>         {$attrs}}</p>
>         <hr>
>       </div>
>     </template>
>     <script>
>     export default {
>       props: ['prop2'],
>     };
>     </script>
> 
> **router/index.js**
> 
>     import Vue from 'vue'
>     import Router from 'vue-router'
>     import CompA from "@/components/CompA";
>     
>     Vue.use(Router)
>     
>     export default new Router({
>       routes: [
>         {
>           path: '/compA',
>           name: '/compA',
>           component: CompA
>         }
>       ]
>     })
> 
> **测试**
> 
> 访问：[http://localhost:8080/\#/compA][http_localhost_8080_compA]
> 
> 结果：$attrs保存的是没有在props中定义的。
> 
> ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZlaXlpbmcwY2FuZ2xhbmc_size_16_color_FFFFFF_t_70][]

# $listeners #

**简介**

> 包含了父作用域中的 (不含 .native 修饰器的) v-on 事件监听器。它可以通过 v-on="$listeners" 传入内部组件——在创建更高层次的组件时非常有用。

**实例**

> **components/CompA.vue**
> 
>     <template>
>       <div id="compA">
>         <comp-b v-on:test1="onTest1"
>                 v-on:test2="onTest2">
>         </comp-b>
>       </div>
>     </template>
>     <script>
>     import CompB from "@/components/CompB";
>     
>     export default {
>       components: {CompB},
>       methods: {
>         onTest1() {
>           alert('test1 running...');
>         },
>         onTest2() {
>           alert('test2 running...');
>         },
>       }
>     };
>     </script>
> 
> **components/CompB.vue**
> 
>     <template>
>       <div class="compB">
>         <comp-c v-bind="$attrs" v-on="$listeners"></comp-c>
>       </div>
>     </template>
>     <script>
>     import CompC from "@/components/CompC";
>     export default {
>       props: ['prop1'],
>       components: { CompC },
>     
>       mounted() {
>         this.$emit('test1');
>       }
>     };
>     </script>
> 
> **components/CompC.vue**
> 
>     <template>
>       <div class="compC">
>         <button @click="emit1">CompC button</button>
>       </div>
>     </template>
>     <script>
>     export default {
>       props: ['prop2'],
>       methods:{
>         emit1() {
>           this.$emit('test2');
>         }
>       }
>     };
>     </script>
> 
> **router/index.js**
> 
>     import Vue from 'vue'
>     import Router from 'vue-router'
>     import CompA from "@/components/CompA";
>     
>     Vue.use(Router)
>     
>     export default new Router({
>       routes: [
>         {
>           path: '/compA',
>           name: '/compA',
>           component: CompA
>         }
>       ]
>     })
> 
> **测试**
> 
> 访问：[http://localhost:8080/\#/compA][http_localhost_8080_compA]
> 
> 结果：CompB加载完毕，事件传递到CompA执行：执行test1事件
> 
> ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZlaXlpbmcwY2FuZ2xhbmc_size_16_color_FFFFFF_t_70 1][]
> 
> 点击按钮：CompC的事件传递到CompA执行：执行test2事件
> 
> ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZlaXlpbmcwY2FuZ2xhbmc_size_16_color_FFFFFF_t_70 2][]

# $children/$parent/$refs #

**其他网址**

> [vue组件($children,$refs，$parent)的使用\_jingtian678的博客-CSDN博客][vue_children_refs_parent_jingtian678_-CSDN]  
> [vue中children的用法\_男兒本色的博客-CSDN博客][vue_children_-CSDN]

**简介**

> **$refs**
> 
> 可以给标签（包括子组件）做标记。
> 
> 示例1：<p ref="one">This is content</p>，然后可以通过this.$refs.one访问此标签。  
> 示例2：<firstchild ref="two"></firstchild>，父组件可通过this.$refs.two访问了这个子组件，包括访问自组件的data里面的数据，调用它的函数。
> 
> **$children**
> 
> 返回组件集合。可以使用this.$children\[i\].属性来访问子组件数据。
> 
> **$parent**
> 
> 返回父组件。可以在子组件中使用this.$parent.属性值/函数

**实例**

> **router/index.js**
> 
>     import Vue from 'vue'
>     import Router from 'vue-router'
>     import CompA from "@/components/CompA";
>     
>     Vue.use(Router)
>     
>     export default new Router({
>       routes: [
>         {
>           path: '/compA',
>           name: 'compA',
>           component: CompA
>         }
>       ]
>     })
> 
> **components/CompA.vue（父组件）**
> 
>     <template>
>       <div class="compA">
>         <p>CompA</p>
>         <button @click="showChildData">点击此处获得子组件data</button>
>         <button @click="runChildFunc">点击此处获得子组件methods</button>
>         <hr>
>         <child-one ref="f1"></child-one>
>         <child-two ref="f2"></child-two>
>       </div>
>     </template>
>     
>     <script>
>     import ChildOne from "@/components/ChildOne";
>     import ChildTwo from "@/components/ChildTwo";
>     
>     export default {
>       components: {ChildOne, ChildTwo},
>       data() {
>         return {
>           data1: "This is CompA",
>         }
>       },
>       methods: {
>         showChildData() {
>           //children方式访问自组件
>           for (let i = 0; i < this.$children.length; i++) {
>             console.log("msg of " + i + " : " + this.$children[i].msg);
>           }
>           //通过$refs访问子组件　
>           console.log("data2 of f1 : " + this.$refs.f1.data2);
>           console.log("data3 of f2 : " + this.$refs.f2.data3);
>         },
>     
>         runChildFunc(){
>           //跟数据相同，本处只示例一个
>           this.$refs.f1.method2();
>         }
>       },
>     }
>     </script>
>     
>     <style scoped>
>     </style>
> 
> **components/ChildOne.vue（子组件1）**
> 
>     <template>
>       <div class="childOne">
>         <p>childOne</p>
>         <button @click="method2">点击此处获得父组件data</button>
>         <hr>
>       </div>
>     </template>
>     
>     <script>
>     export default {
>       data() {
>         return {
>           data2: "This is data2 of ChildOne",
>           msg: "This is msg of ChildOne"
>         }
>       },
>       methods:{
>         method2(){
>           console.log("method2 of ChildOne: get data1 of CompA : " + this.$parent.data1);
>         }
>       }
>     }
>     </script>
>     
>     <style scoped>
>     </style>
> 
> **components/ChildTwo.vue（子组件2）**
> 
>     <template>
>       <div class="childTwo">
>         <p>ChildTwo</p>
>       </div>
>     </template>
>     
>     <script>
>     export default {
>       data() {
>         return {
>           data3: "This is data3 of ChildTwo",
>           msg: "This is msg of ChildTwo"
>         }
>       }
>     }
>     </script>
>     
>     <style scoped>
>     </style>
> 
> **测试**
> 
> 访问： [http://localhost:8080/\#/compA][http_localhost_8080_compA]
> 
> ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZlaXlpbmcwY2FuZ2xhbmc_size_16_color_FFFFFF_t_70 3][]
> 
> 依次点击“点击此处获得子组件data”、“点击此处获得子组件methods”、“点击此处获得父组件data”
> 
> ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZlaXlpbmcwY2FuZ2xhbmc_size_16_color_FFFFFF_t_70 4][]

# $data #

**简介**

> 组件的data要用函数来定义，比如：
> 
>     data: function () {
>       return {
>         count: 0
>       }
>     }
> 
> 而不是用对象来定义，如：
> 
>     data: {
>       count: 0
>     }
> 
> 因为，用函数的时候，每次用到data中的值时，都会新建一个对象返回，每个实例拥有自己的数据；用对象的时候，会共享数据（在比较新的vue版本中，若用对象的形式来写，则直接不会显示（测试版本为：2.5.16））。

## 裸Vue.js ##

**其他网址**

> [组件基础 — Vue.js官网][_ Vue.js]

**实例（component）**

>     <!doctype html>
>     <html lang="en">
>     
>     <head>
>         <meta charset="UTF-8">
>         <title>this is title</title>
>         <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
>     </head>
>     
>     <body>
>     
>     <div id="components-demo">
>         <button-counter></button-counter>
>         <button-counter></button-counter>
>     </div>
>     
>     <script>
>         Vue.component('button-counter', {
>             data: function () {
>                 return {
>                     count: 0
>                 }
>             },
>             template: '<button v-on:click="count++">You clicked me {
>         { count }} times.</button>'
>         })
>     
>         new Vue({
>             el: '#components-demo'
>         })
>     </script>
>     
>     </body>
>     </html>
> 
> **结果**
> 
> ![20201111232127759.png][]
> 
> 假如把 Vue.component('button-counter' ...)的data换为如下定义方法：
> 
>     data: {
>         count: 0
>       },
> 
> 结果：（结果如下（不显示数字了，而且点击按钮毫无反应） ）
> 
> ![20201111232403725.png][]

**实例（只是vue）**

>     <!doctype html>
>     <html lang="en">
>     
>     <head>
>         <meta charset="UTF-8">
>         <title>this is title</title>
>         <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
>     </head>
>     
>     <body>
>     
>     <div id="components-demo">
>         <input type="button" @click="changeName">
>         {
>         {count}}
>     </div>
>     
>     <script>
>         new Vue({
>             el: '#components-demo',
>             data(){return  {
>                 count: 0,
>             }},
>             methods:{
>                 changeName() {
>                     this.count = this.count + 1;
>                 }
>             }
>         })
>     </script>
>     
>     </body>
>     </html>
> 
> **测试（每点击按钮一次，数字加1）**
> 
> ![20201112201559395.png][]
> 
> 假如把 new Vue的data换为如下定义方法：
> 
>     data: {
>         count: 0
>       },
> 
> 结果也是正常的：
> 
> ![20201112201559395.png][]

## 结合工程 ##

**实例**

> **计数组件components/Counter.vue**
> 
>     <template>
>       <div>
>         <input v-model="count" type="button" @click="increase">
>         count: {
>         { count }}
>       </div>
>     </template>
>     
>     <script>
>     export default {
>       name: "Count",
>       data() {
>         return {
>           count: 0
>         }
>       },
>       methods: {
>         increase() {
>           this.count++;
>         }
>       }
>     }
>     </script>
>     
>     <style scoped>
>     
>     </style>
> 
> 引用组件components/MyCount.vue
> 
>     <template>
>       <div>
>         <MyCounter></MyCounter>
>         <MyCounter></MyCounter>
>       </div>
>     </template>
>     
>     <script>
>     import MyCounter from "@/components/Counter";
>     export default {
>       name: "MyCount",
>       components:{
>         MyCounter
>       }
>     }
>     </script>
>     
>     <style scoped>
>     
>     </style>
> 
> **路由router/index.js**
> 
>     import Vue from 'vue'
>     import Router from 'vue-router'
>     import MyCount from "@/components/MyCount";
>     
>     Vue.use(Router)
>     
>     export default new Router({
>       routes: [
>         {
>           path: '/myCount',
>           name: 'myCount',
>           component: MyCount
>         }
>       ]
>     })
> 
> **测试**
> 
> 连个按钮独立显示，每按一下按钮加一。
> 
> ![2020111123101514.png][]
> 
> 假如把 components/Counter.vue的data换为如下定义方法：
> 
>     data: {
>         count: 0
>       },
> 
> 结果如下（不显示数字了，而且点击按钮毫无反应）
> 
> ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZlaXlpbmcwY2FuZ2xhbmc_size_16_color_FFFFFF_t_70 5][]
> 
> Webstorm的提示：
> 
> ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZlaXlpbmcwY2FuZ2xhbmc_size_16_color_FFFFFF_t_70 6][]

## 原理 ##

**其他网址**

> [Vue(ES6)中的data属性为什么不能是一个对象？][Vue_ES6_data]

**为什么可以用函数来定义对象？**

> vue是支持将一个对象作为vue构造参数中data属性的值并且，如果data是方法的话，也会先取得内部返回的对象结果。详见代码：
> 
>     // vue/src/core/instance/state.js
>     function initData (vm: Component) {
>       var data = vm.$options.data;
>       data = vm._data = typeof data === 'function'
>         ? getData(data, vm)
>         : data || {};
>       if (!isPlainObject(data)) {
>         data = {};
>         process.env.NODE_ENV !== 'production' && warn(
>           'data functions should return an object:\n' +
>           'https://vuejs.org/v2/guide/components.html#data-Must-Be-a-Function',
>           vm
>         );
>       }
>       ...
>     }

[Vue--API--_IT_-CSDN]: https://knife.blog.csdn.net/article/details/109755906
[vue_attrs]: https://juejin.im/post/6844903784989081607
[vm._attrs _Vue 2.4.0_inheritAttrs_attrs_ -]: https://www.jianshu.com/p/ce8ca875c337
[http_localhost_8080_compA]: http://localhost:8080/#/compA
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZlaXlpbmcwY2FuZ2xhbmc_size_16_color_FFFFFF_t_70]: /images/20221120/6d0f2f99a9d648b58505e3b82e7dae4a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZlaXlpbmcwY2FuZ2xhbmc_size_16_color_FFFFFF_t_70 1]: /images/20221120/11315ce07992414bbf7c1e1f6f39bfe5.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZlaXlpbmcwY2FuZ2xhbmc_size_16_color_FFFFFF_t_70 2]: /images/20221120/6b63b211645d4e669ae753524dc2d80b.png
[vue_children_refs_parent_jingtian678_-CSDN]: https://blog.csdn.net/jingtian678/article/details/81944977
[vue_children_-CSDN]: https://blog.csdn.net/qq_41627870/article/details/88198585
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZlaXlpbmcwY2FuZ2xhbmc_size_16_color_FFFFFF_t_70 3]: /images/20221120/b95a3caf153c451eae50e7453d8714d1.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZlaXlpbmcwY2FuZ2xhbmc_size_16_color_FFFFFF_t_70 4]: /images/20221120/4413db387f2c4d14bd4a31b1be16e599.png
[_ Vue.js]: https://cn.vuejs.org/v2/guide/components.html
[20201111232127759.png]: /images/20221120/ac4b645935134718b2c1a0b260d705c8.png
[20201111232403725.png]: /images/20221120/d7231705b3544e678cf3ab9e52bfbf0b.png
[20201112201559395.png]: /images/20221120/316d8b9bf7eb462b85e3e3f0150aee71.png
[2020111123101514.png]: /images/20221120/98dbcae7601d4993bc60bec1c1cc0306.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZlaXlpbmcwY2FuZ2xhbmc_size_16_color_FFFFFF_t_70 5]: /images/20221120/1e1413490ce248dd9ef6a6889da84a1f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZlaXlpbmcwY2FuZ2xhbmc_size_16_color_FFFFFF_t_70 6]: /images/20221120/6b2b14684f284075994e85946002d656.png
[Vue_ES6_data]: https://juejin.im/post/6844903638939205640