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

最新推荐文章于 2024-05-18 10:37:03 发布
最新推荐文章于 2024-05-18 10:37:03 发布
阅读量185 收藏
点赞数
分类专栏： Vue.js 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_29689343/article/details/118119489
版权

文章目录

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>
  <!-- 引入Vue库 -->
  <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>
  <!-- 引入Vue库 -->
  <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>
  <!-- 引入Vue库 -->
  <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>
  <!-- 引入Vue库 -->
  <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>
  <!-- 引入Vue库 -->
  <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

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

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

訾博ZiBo
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
【Vue3 从入门到实战 进阶式掌握完整知识体系】探索组件的理念：单向数据流的理解（004）
weixin_42066070的博客
11-30 768
第一个案例 <!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"> <tit
【Vue3 从入门到实战 进阶式掌握完整知识体系】007-Vue语法基础：列表循环渲染
訾博（ZiBo）的博客
06-20 507
文章目录7、列表循环渲染使用v-for渲染数组运行结果使用v-for渲染对象运行结果使用key优化性能运行结果控制数组给对象添加属性运行结果循环n次运行结果指定某元素不显示运行结果存在问题解决问题：使用template运行结果 7、列表循环渲染 使用v-for渲染数组 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Com
【Vue3 从入门到实战 进阶式掌握完整知识体系】014-探索组件的理念：父子组件如何通过事件进行通信
訾博（ZiBo）的博客
06-29 268
5、父子组件如何通过事件进行通信 子组件调用的方法让父组件处理 子组件调用父组件的方法来改变父组件的数据。子组件无法改变父组件传过来的数据，可以通过此方法请求父组件来进行改变！ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta na
【Vue3 从入门到实战 进阶式掌握完整知识体系】004-Vue语法基础：数据、方法、计算属性、侦听器
訾博（ZiBo）的博客
06-19 188
文章目录4、数据、方法、计算属性、侦听器代码运行结果计算属性和方法的不同运行结果侦听器运行结果侦听器参数代码运行结果总结 4、数据、方法、计算属性、侦听器 代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewpo
【Vue3 从入门到实战 进阶式掌握完整知识体系】010-探索组件的理念：组件概述
訾博（ZiBo）的博客
06-22 263
文章目录三、探索组件的理念1、组件概述组件图解简单使用运行结果复用组件运行结果组件可嵌套使用运行结果全局组件局部组件运行结果 三、探索组件的理念 1、组件概述 组件图解 组件的概念非常常见，类似于模块的概念 简单使用 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=ed
【Vue3 从入门到实战 进阶式掌握完整知识体系】030-Composition API：Setup函数的使用
訾博（ZiBo）的博客
06-30 295
文章目录六、Composition API1、Setup函数的使用代码运行结果setup内部更多写法运行结果Composition API 和 Options API 中的同名属性运行结果参数props运行结果props是响应式的运行结果使用ES6解构props运行结果使从props解构后的属性再次变成响应式子组件改变父组件传递过来的数据：改副本运行结果子组件改变父组件传递过来的数据：对外触发事件运行结果 六、Composition API 组合 API ，即将数据和业务逻辑放在一起处理，而不是像vue2
Vue3+TypeScript从入门到进阶（二）——Vue2和Vue3的区别——附沿途学习案例及项目实战代码
wuyxinu的博客
05-10 2911
一、简介 二、Vue2和Vue3区别 见后续文章 三、Vue知识点学习 见后续文章 四、TypeScript知识点 见后续文章 五、项目实战 见后续文章 六、项目打包和自动化部署 见后续文章 七、沿途学习代码地址及案例地址 1、沿途学习代码地址 https://gitee.com/wu_yuxin/vue3-learning.git 2、项目案例地址 https://gitee.com/wu_yuxin/vue3-ts-cms.git 3、项目访问地址 http://101.34.91.130:8330/l
Vue2+3入门到实战
Blue92120的博客
07-04 443
黑马前端老师介绍到：现在很多公司仍然在用Vue2，也在维护Vue2的老项目，当然Vue3也在快速发展，为了让大家清楚的知道前端需掌握的必备技能，播妞特地采访了一位从黑马毕业 5 年，并一直在前端领域“摸爬滚打”的学长。对于前端技术，他说得最多的便是：想在前端领域立足，一定要学好前端三剑客（HTML+CSS+Js），其次便是。教程包含Vue2.x + Vue3.x + 实战项目，以及最新Vue3语法，紧跟前端最新生态。教程包含 20+ 实战案例，2 大企业项目实战，通过综合实战，强化你真实企业开发能力。
Vue快速入门学习笔记(更新ing)
喜欢前端的后端 MelodyJerry
11-15 4132
原在博客园发布，先同步到CSDN：https://www.cnblogs.com/melodyjerry/p/13768594.html 本笔记综合了视频狂神说的Vue快速上手和菜鸟教程、CSDN等博客文章，以及个人的一些学习见解与体会。 由于是为了团队需要而快速入门，HTML、CSS、JS、Vue等基础均不全，故本笔记仅供参考学习使用。 Vue 的核心库只关注视图层，方便与第三方库或既有项目整合。 HTML + CSS + JS : 视图 ： 给用户看，刷新后台给的数据 网络通信 ： axios.
vue面试题 内含详细讲解（涵盖入门到精通，自测 Vue 掌握程度
m0_70274530的博客
04-29 193
数组语法： data: { activeClass: ‘active’, errorClass: ‘text-danger’ } Style 也可以通过对象语法和数组语法进行动态绑定： 对象语法： data: { activeColor: ‘red’, fontSize: 30 } 数组语法： data: { styleColor: { color: ‘red’ }, styleSize:{ fontSize:‘23px’ } } [](()四.怎么理解Vue的单向数据流？ ============
【3d酷炫旋转特效—— 效果 + 代码】| 前端面试：介绍一下常用的前端框架（如React、Vue、Angular）的特点和区别。
追光者♂：记录、分享、总结、提升，现象级专栏《Python从入门到人工智能》作者，无惧黑暗，坚信曙光
02-11 912
目录效果代码说明 效果 代码 index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>3d酷炫旋转特效</title> <link rel="stylesheet" href="css/reset.min.css"> <link rel="stylesheet" href="css/style.css">
【Vue3 从入门到实战 进阶式掌握完整知识体系】031-Composition API：ref，reactive 响应式引用的用法和原理
訾博（ZiBo）的博客
06-30 312
文章目录2、ref，reactive 响应式引用的用法和原理动态改变setup中定义的属性运行结果使用ref是基本数据类型变成响应式运行结果实际上ref也能处理非基本类型的数据运行结果使用reactive是非基本数据类型变成响应式运行结果小结readonly使定义的属性只读运行结果解构对象的属性不是响应式的运行结果toRefs使解构对象的属性也变成响应式的运行结果 2、ref，reactive 响应式引用的用法和原理 原理：通过 proxy 对数据进行封装，当数据变化时，触发模板等内容的更新； 作用：使非
怎么理解vue是单向数据流
q123q9的博客
03-15 4185
vue单向数据流
Vue 3的 h 函数详解
訾博（ZiBo）的博客
09-27 7735
Vue 3的`h`函数（`createVNode`）是前端开发中一个强大的工具，用于创建虚拟DOM节点。虚拟DOM是Vue框架中的核心概念，通过它，我们可以更高效地更新页面内容。本文将深入探讨Vue 3的`h`函数及其用法。
Vue 3 父子组件互调方法 - setup 语法糖写法
訾博（ZiBo）的博客
04-12 5205
Vue 3 父子组件互调方法 - setup 语法糖写法 文章目录Vue 3 父子组件互调方法 - setup 语法糖写法一、父组件调用子组件方法1、子组件2、父组件3、测试结果4、关于 defineExpose 的官方文档二、子组件调用父组件方法1、子组件2、父组件3、测试结果4、关于 defineEmits 的官方文档 下面演示均为使用 setup 语法糖的情况！ 一、父组件调用子组件方法 下面演示为使用 setup 语法糖的情况，值得注意的是子组件需要使用 defineExpose 对外暴露方法
类型“{}”上不存在属性“xxx”。ts(2339)-解决方案集锦
訾博（ZiBo）的博客
01-15 3783
类型“{}”上不存在属性“xxx”。ts(2339)
Vue 3 子组件接收父组件传参数
訾博（ZiBo）的博客
04-14 2003
Vue 3 子组件接受父组件传参数。
VueHooks Plus：Vue 3 Hooks 的全面解决方案
最新发布
訾博（ZiBo）的博客
05-18 1933
VueHooks Plus 旨在简化 Vue 3 开发者的 Hook 使用过程。它提供了基础和高级的 Hook，让开发者能够以简洁的语法和易用的特性快速上手。无论你是 Vue 的新手还是老手，VueHooks Plus 都能帮助你轻松构建高性能的逻辑。VueHooks Plus 不仅仅是一个 Hooks 库，它是一个全面的解决方案，涵盖了从请求处理到状态管理，再到 DOM 操作和开发辅助的各个方面。通过插件化的设计和丰富的功能，VueHooks Plus 极大地提升了 Vue 3 开发的效率和体验。
Vue-cli3实战：打造全屏滚动组件v-fullpage
"基于vue-cli3快速发布fullpage组件的教程" 在本文中，我们将深入探讨如何使用vue-cli3工具快速创建并发布一个基于Vue.js的Fullpage组件。Vue-cli3是一个强大的脚手架，用于快速搭建 Vue.js 项目，简化开发流程。...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值