单向数据流的理解 · vue笔记

[TOC] >[success] # 单向数据流的理解 **vue中子组件可以使用父组件传递过来的数据，但是绝对不能修改传递过来的数据** 。 **需求**：封装一个 **计数器组件** ，根据 **父组件传入的数值，在子组件中点击数值后每次自增 + 1** 。上面的需求中， **子组件每次自增 + 1** 时，就会 **改变父组件的值** ，这样就 **违背了vue的单项数据流** ，那么如何解决呢？ **解决方案**：**子组件内用一个变量，复制父组件传入的数值副本** ，通过 **修改变量副本** 达到想要的效果。 **index.html** ~~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title> 单向数据流的理解</title>  <script src="https://unpkg.com/vue@next"></script> </head> <body> <div id="root"></div> </body> <script> const app = Vue.createApp({ data(){ return { num: 1 } }, template: ` <div> <counter :count="num"/> </div>` }) // 创建全局组件 app.component('counter', { props: ['count'], data(){ return { myCount: this.count // 复制一份count } }, template: '<div @click="myCount += 1 ">{{myCount}}</div>' }) const vm = app.mount('#root') </script> </html> ~~~ 为什么 **vue是单项数据流** 呢，看下面的代码中， **引入了4次子组件** ，并且**4个组件中传入的值** 都是 **num变量**，我们思考一下，如果 **其中一个子组件修改了num ，那么其他用到num变量的组件也会被同时改变** ，这样就会出现问题，这就是 **单项数据流不允许子组件修改父组件传入的数据，避免数据出现高度耦合** 。 ~~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title> 单向数据流的理解</title>  <script src="https://unpkg.com/vue@next"></script> </head> <body> <div id="root"></div> </body> <script> const app = Vue.createApp({ data(){ return { num: 1 } }, template: ` <div> <counter :count="num"/> <counter :count="num"/> <counter :count="num"/> <counter :count="num"/> </div>` }) // 创建全局组件 app.component('counter', { props: ['count'], data(){ return { myCount: this.count // 复制一份count } }, template: '<div @click="myCount += 1 ">{{myCount}}</div>' }) const vm = app.mount('#root') </script> </html> ~~~ >[warning] # 注意 1. **父组件给子组件传值** ，如果传入的值有很多，可以用 **传入对象的形式** 。 2. 如果 **自定义的属性名** 很长，可以用 **中划线分割单词的形式** ，例如： **picker-name** ，那样的话，在子组件内 **props中接收** 就要这样写：**pickerName**