【Vue 从入门到实战进阶式掌握完整知识体系】012

2025-07-28 09:57:10

【Vue 从入门到实战进阶式掌握完整知识体系】012 、单向数据流的理解传多个参数的情况代码语言：javascript代码运行次数：0运行复制<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-

【Vue 从入门到实战进阶式掌握完整知识体系】012

、单向数据流的理解

传多个参数的情况

代码语言：javascript代码运行次数：0运行复制

<!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>
  <!-- 引入Vue库 -->
  <script src="@next"></script>
</head>

<body>
  <div id="root"></div>
</body>

<script>
  ct app = ({
    data(){
      return{
        message: 'Hello World!',
        message1: 'Hello World111!',
        message2: 'Hello World222!',
        message: 'Hello World!',
      }
    },
    template: `
        <div>
          <test :message="message" :message1="message1" :message2="message2" :message="message" />
        </div>
    `
  });

  appponent('test',{
    props: ['message', 'message1', 'message2', 'message'],
    template: `
        <div>
          {{ message }} -- {{ message1 }} -- {{ message2 }} -- {{ message }}
        </div>
    `
  })

  ct vm = ('#root');
</script>

</html>

运行结果

image-2021061125240.png

简化传多个参数的写法

代码语言：javascript代码运行次数：0运行复制

<!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>
  <!-- 引入Vue库 -->
  <script src="@next"></script>
</head>

<body>
  <div id="root"></div>
</body>

<script>
  ct app = ({
    data(){
      return{
        parameter: {
          message: 'Hello World!',
          message1: 'Hello World111!',
          message2: 'Hello World222!',
          message: 'Hello World!',
        }
      }
    },
    template: `
        <div>
          <test v-bind="parameter" />
        </div>
    `
  });

  appponent('test',{
    props: ['message', 'message1', 'message2', 'message'],
    template: `
        <div>
          {{ message }} -- {{ message1 }} -- {{ message2 }} -- {{ message }}
        </div>
    `
  })

  ct vm = ('#root');
</script>

</html>

运行结果

image-2021061125622108.png

关于属性名

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

代码语言：javascript代码运行次数：0运行复制

<!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>
  <!-- 引入Vue库 -->
  <script src="@next"></script>
</head>

<body>
  <div id="root"></div>
</body>

<script>
  ct app = ({
    data(){
      return{
        message: 'Hello World!'
      }
    },
    // 这里使用 - 写
    template: `
        <div>
          <test :my-message="message" />
        </div>
    `
  });

  // 然而这里必须使用驼峰式命名接收，否则接收不到！
  appponent('test',{
    props: ['myMessage'],
    template: `
        <div>
          {{ myMessage }}
        </div>
    `
  })

  ct vm = ('#root');
</script>

</html>

运行结果

image-202106110158946.png

单向数据流

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

代码语言：javascript代码运行次数：0运行复制

<!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>
  <!-- 引入Vue库 -->
  <script src="@next"></script>
</head>

<body>
  <div id="root"></div>
</body>

<script>
  ct app = ({
    data(){
      return{
        count: 1
      }
    },
    
    template: `
        <div>
          <test :count="count" />
        </div>
    `
  });

  
  appponent('test',{
    props: ['count'],
    template: `
        <div @click="count ++">{{ count }}</div>
    `
  })

  ct vm = ('#root');
</script>

</html>

运行结果

image-202106110550889.png

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

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

代码语言：javascript代码运行次数：0运行复制

<!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>
  <!-- 引入Vue库 -->
  <script src="@next"></script>
</head>

<body>
  <div id="root"></div>
</body>

<script>
  ct app = ({
    data(){
      return{
        count: 1
      }
    },
    
    template: `
        <div>
          <test :count="count" />
        </div>
    `
  });

  
  appponent('test',{
    props: ['count'],
    data(){
      return{
        myCount: 
      }
    },
    template: `
        <div @click="myCount ++">{{ myCount }}</div>
    `
  })

  ct vm = ('#root');
</script>

</html>

运行结果

image-20210611102864.png

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

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

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。原始发表：2025-01-06，如有侵权请联系 cloudcommunity@tencent 删除scriptvue入门数据数据流

#感谢您对电脑配置推荐网 - 最新i3 i5 i7组装电脑配置单推荐报价格的认可，转载请说明来源于"电脑配置推荐网 - 最新i3 i5 i7组装电脑配置单推荐报价格

本文地址：http://www.dnpztj.cn/biancheng/1200217.html

推荐阅读

留言与评论（共有 17 条评论）

本站网友 visvim	7分钟前发表
'Hello World111!'
本站网友北大方正保险	13分钟前发表
` <div> <test v-bind="parameter" /> </div> ` }); appponent('test'
本站网友资本项目可兑换	29分钟前发表
initial-scale=1.0"> <title>hello vue</title> <!-- 引入Vue库 --> <script src="@next"></script> </head> <body> <div id="root"></div> </body> <script> ct app = ({ data(){ return{ message
本站网友上海电影票团购	5分钟前发表
否则接收不到！ appponent('test'
本站网友论人言可畏	2分钟前发表
否则接收不到！ appponent('test'
本站网友天津商学院游泳馆	4分钟前发表
template
本站网友上海肝病	19分钟前发表
initial-scale=1.0"> <title>hello vue</title> <!-- 引入Vue库 --> <script src="@next"></script> </head> <body> <div id="root"></div> </body> <script> ct app = ({ data(){ return{ count
本站网友盐酸肾上腺素注射液	6分钟前发表
initial-scale=1.0"> <title>hello vue</title> <!-- 引入Vue库 --> <script src="@next"></script> </head> <body> <div id="root"></div> </body> <script> ct app = ({ data(){ return{ message
本站网友西伯利亚训练营	14分钟前发表
'Hello World!'
本站网友南宁搜房网	11分钟前发表
message="message"
本站网友云开发	1分钟前发表
` <div @click="count ++">{{ count }}</div> ` }) ct vm = ('#root'); </script> </html>运行结果image-202106110550889.png解决无法更改父组件传递过来的数据的问题子组件无法改变父组件传递过来的数据
本站网友身体构造	3分钟前发表
template
本站网友宫颈癌症状	23分钟前发表
'message']
本站网友 beats音效	13分钟前发表
count="count" /> </div> ` }); appponent('test'
本站网友《向日葵》	14分钟前发表
template
本站网友广州新世纪医院	6分钟前发表
{ props

【Vue 从入门到实战进阶式掌握完整知识体系】012