【Vue3 从入门到实战进阶式掌握完整知识体系】012-探索组件的理念：单向数据流的理解

柔光的暖阳◎ 2023-10-03 08:58 46阅读 0赞

### 文章目录 ###

*   *  3、单向数据流的理解
     *   *  传多个参数的情况
         *  运行结果
         *  简化传多个参数的写法
         *  运行结果
         *  关于属性名
         *  运行结果
         *  单向数据流
         *  运行结果
         *  解决无法更改父组件传递过来的数据的问题
         *  运行结果
         *  为什么自组件不能改父组件的数据

## 3、单向数据流的理解 ##

### 传多个参数的情况 ###

<!DOCTYPE html>
    <html lang="en">
    
    <head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>hello vue</title>
      
      <script src="https://unpkg.com/vue@next"></script>
    </head>
    
    <body>
      <div id="root"></div>
    </body>
    
    <script>
      const app = Vue.createApp({
         
        data(){
         
          return{
         
            message: 'Hello World!',
            message1: 'Hello World111!',
            message2: 'Hello World222!',
            message3: 'Hello World333!',
          }
        },
        template: `
            <div>
              <test :message="message" :message1="message1" :message2="message2" :message3="message3" />
            </div>
        `
      });
    
      app.component('test',{
         
        props: ['message', 'message1', 'message2', 'message3'],
        template: `
            <div>
              {
          { message }} -- {
          { message1 }} -- {
          { message2 }} -- {
          { message3 }}
            </div>
        `
      })
    
      const vm = app.mount('#root');
    </script>
    
    </html>

### 运行结果 ###

![image-20210613125233430.png][]

### 简化传多个参数的写法 ###

<!DOCTYPE html>
    <html lang="en">
    
    <head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>hello vue</title>
      
      <script src="https://unpkg.com/vue@next"></script>
    </head>
    
    <body>
      <div id="root"></div>
    </body>
    
    <script>
      const app = Vue.createApp({
         
        data(){
         
          return{
         
            parameter: {
         
              message: 'Hello World!',
              message1: 'Hello World111!',
              message2: 'Hello World222!',
              message3: 'Hello World333!',
            }
          }
        },
        template: `
            <div>
              <test v-bind="parameter" />
            </div>
        `
      });
    
      app.component('test',{
         
        props: ['message', 'message1', 'message2', 'message3'],
        template: `
            <div>
              {
          { message }} -- {
          { message1 }} -- {
          { message2 }} -- {
          { message3 }}
            </div>
        `
      })
    
      const vm = app.mount('#root');
    </script>
    
    </html>

### 运行结果 ###

![image-20210613125622108.png][]

### 关于属性名 ###

> 属性名如果是多个单词，建议使用 - 分割，html属性名不支持大写，会自动转换成小写！

<!DOCTYPE html>
    <html lang="en">
    
    <head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>hello vue</title>
      
      <script src="https://unpkg.com/vue@next"></script>
    </head>
    
    <body>
      <div id="root"></div>
    </body>
    
    <script>
      const app = Vue.createApp({
         
        data(){
         
          return{
         
            message: 'Hello World!'
          }
        },
        // 这里使用 - 写
        template: `
            <div>
              <test :my-message="message" />
            </div>
        `
      });
    
      // 然而这里必须使用驼峰式命名接收，否则接收不到！
      app.component('test',{
         
        props: ['myMessage'],
        template: `
            <div>
              {
          { myMessage }}
            </div>
        `
      })
    
      const vm = app.mount('#root');
    </script>
    
    </html>

### 运行结果 ###

![image-20210613130158946.png][]

### 单向数据流 ###

> 子组件无权改变父组件传递过来的数据

<!DOCTYPE html>
    <html lang="en">
    
    <head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>hello vue</title>
      
      <script src="https://unpkg.com/vue@next"></script>
    </head>
    
    <body>
      <div id="root"></div>
    </body>
    
    <script>
      const app = Vue.createApp({
         
        data(){
         
          return{
         
            count: 1
          }
        },
        
        template: `
            <div>
              <test :count="count" />
            </div>
        `
      });
    
      
      app.component('test',{
         
        props: ['count'],
        template: `
            <div @click="count ++">{
          { count }}</div>
        `
      })
    
      const vm = app.mount('#root');
    </script>
    
    </html>

### 运行结果 ###

![image-20210613130550889.png][]

### 解决无法更改父组件传递过来的数据的问题 ###

> 子组件无法改变父组件传递过来的数据，子组件可以自定义一个属性，将父组件传过来的数据赋值给自定义的属性，然会对自定义的属性进行更改

<!DOCTYPE html>
    <html lang="en">
    
    <head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>hello vue</title>
      
      <script src="https://unpkg.com/vue@next"></script>
    </head>
    
    <body>
      <div id="root"></div>
    </body>
    
    <script>
      const app = Vue.createApp({
         
        data(){
         
          return{
         
            count: 1
          }
        },
        
        template: `
            <div>
              <test :count="count" />
            </div>
        `
      });
    
      
      app.component('test',{
         
        props: ['count'],
        data(){
         
          return{
         
            myCount: this.count
          }
        },
        template: `
            <div @click="myCount ++">{
          { myCount }}</div>
        `
      })
    
      const vm = app.mount('#root');
    </script>
    
    </html>

### 运行结果 ###

![image-20210613131028364.png][]

### 为什么自组件不能改父组件的数据 ###

因为如果子组件能更改父组件的数据，其他使用该数据的组件里面使用的数据也会随之更改，那么每个组件之间就相互影响了！

[image-20210613125233430.png]: https://img-blog.csdnimg.cn/img_convert/5962e80017c03ec69136c718586efea5.png
[image-20210613125622108.png]: https://img-blog.csdnimg.cn/img_convert/568c5968d194b74bd46bb1a5b6a000f7.png
[image-20210613130158946.png]: https://img-blog.csdnimg.cn/img_convert/34613c5c4e6bb8dcace90b08f1df580c.png
[image-20210613130550889.png]: https://img-blog.csdnimg.cn/img_convert/c2191a1161e2eaf421f0f6334cf4797e.png
[image-20210613131028364.png]: https://img-blog.csdnimg.cn/img_convert/29feed8626f4f07e3cea344ef17a389a.png