VUE3 之 组件传参
1. 概述
韦奇定律告诉我们：大部分人都很容易被别人的话所左右，从而开始动摇、怀疑，最终迷失自我。因此我们要努力的坚定信念，相信自己，才不会被周围的环境所左右，才能取得最终的胜利。
言归正传，之前我们聊了组件的概念，既然有多个组件，那自然存在组件间传参的问题，今天我们就来聊聊 VUE 的 组件传参。
2. 组件传参
2.1 初识组件传参
<body>
<div id="myDiv"></div>
</body>
<script>
const app = Vue.createApp({
template:`
<div>
<test content="hello" />
</div>
`
});
app.component("test", {
props:['content'],
template:`
<div>{{content}}</div>
`
});
从例子中可以看出，我们在主组件的 test 组件中增加了属性 content，并在 test 组件中使用 props 接收了 content 属性，然后在 template 中使用
2.2 组件参数绑定数据
const app = Vue.createApp({
data() {
return {
num: 123
}
},
template:`
<div>
<test :content="num" />
</div>
`
});
app.component("test", {
props:['content'],
template:`
<div>{{content}}</div>
`
});
这个例子中，我们稍微改进了一下，组件的属性不再是写死的，而是使用我们之前学的绑定知识，使用 :content="num"，与数据中的 num 绑定
2.3 向组件中传多个参数
const app = Vue.createApp({
data() {
return {
num1: 123,
num2: 456,
num3: 789
}
},
template:`
<div>
<test :num1="num1" :num2="num2" :num3="num3" />
</div>
`
});
app.component("test", {
props:['num1', 'num2', 'num3'],
template:`
<div>{{num1}}</div>
<div>{{num2}}</div>
<div>{{num3}}</div>
`
});
同理，在组件 test 的标签中多写一些属性，num1、num2、num3，然后在 test 组件中使用 props 接收这些参数
似乎没有什么问题，但如果需要传的参数很多， 就有点不优雅了
2.4 向组件中传多个参数-改进版1
const app = Vue.createApp({
data() {
return {
params : {
num1: 123,
num2: 456,
num3: 789
}
}
},
template:`
<div>
<test v-bind="params" />
</div>
`
});
app.component("test", {
props:['num1', 'num2', 'num3'],
template:`
<div>{{num1}}</div>
<div>{{num2}}</div>
<div>{{num3}}</div>
`
});
这个例子，把 num1、num2、num3 封装到了 params 这个对象中，然后使用 v-bind="params"，将整个对象传给组件，组件接收的方式不变，比之前优雅很多
2.5 向组件中传多个参数-改进版2
const app = Vue.createApp({
data() {
return {
params : {
num1: 123,
num2: 456,
num3: 789
}
}
},
template:`
<div>
<test :params="params" />
</div>
`
});
app.component("test", {
props:['params'],
template:`
<div>{{params.num1}}</div>
<div>{{params.num2}}</div>
<div>{{params.num3}}</div>
`
});
这个例子较上个例子稍有不同，主组件使用对象的方式传递 :params="params"，test 子组件也使用对象的方式接收 props:['params']，使用时使用 params.num1 的方式
这种方式较上一种方式，感觉更符合一般的编程习惯，根据个人喜好使用吧
2.6 参数的名称由多个单词组成
const app = Vue.createApp({
data() {
return {
num: 123
}
},
template:`
<div>
<test :num-a="num" />
</div>
`
});
app.component("test", {
props:['numA'],
template:`
<div>{{numA}}</div>
`
});
当参数的名称由多个单词组成，官方的建议是，在组件标签中使用 小写 + ‘-’ 的方式命名，例如：num-a
但在子组件接收时，要使用驼峰命名法接收，例如：numA
哈哈，有点坑哦，要是写成 props:['num-a'] 是接收不到参数的
2.7 参数的计算（错误案例）
const app = Vue.createApp({
data() {
return {
num: 10
}
},
template:`
<div>
<test :num="num" />
</div>
`
});
app.component("test", {
props:['num'],
template:`
<div>{{num}}</div>
<button @click="num = num + 1">num 加 1</button>
`
});
这个例子，我们接收到参数后，在子组件中将其自增
很不幸，自增没有成功，提示错误，大概意思是：这个参数是只读滴，不能修改 :(
那怎么办呢，看下面的例子
2.8 参数的计算（成功案例）
app.component("test", {
props:['num'],
data() {
return {
myNum : this.num
}
},
template:`
<div>{{myNum}}</div>
<button @click="myNum = myNum + 1">num 加 1</button>
`
});
上一个例子告诉我们，父组件传过来的参数，到了子组件都是只读的，不能改变
因此我们换一个思路，我们在子组件中建一个自己的数据 myNum，然后把父组件传过来的数据作为初始值，然后去自增子组件的 myNum 数据
很明显是可以的
3. 综述
今天聊了一下 VUE3 的 组件传参，希望可以对大家的工作有所帮助，下一节我们继续讲组件的相关知识，敬请期待
欢迎帮忙点赞、评论、转发、加关注 ：）
关注追风人聊Java，每天更新Java干货。
4. 个人公众号
追风人聊Java，欢迎大家关注
VUE3 之 组件传参的更多相关文章
- Vue 子组件向父组件传参
直接上代码 <body> <div id="counter-event-example"> <p>{{ total }}</p> & ...
- vue 父子组件传参
父向子组件传参 例子:App.vue为父,引入componetA组件之后,则可以在template中使用标签(注意驼峰写法要改成componet-a写法,因为html对大小写不敏感,component ...
- Vue(小案例_vue+axios仿手机app)_公共组件（路由组件传参）
一.前言 1.公共轮播图的实现 2.组件传参,公共组件的实现 二.主要内容 1.公共轮播图的实现 (1)分析:当渲染不同的轮 ...
- Vue-admin工作整理（四）：路由组件传参
路由组件传参:如果在一个页面中,需要根据路由去获得参数,去对页面进行一些逻辑处理,首先可以通过this.$router来获取路由实例的参数,这样页面组件和路由就进行了耦合,为了进行分离,更大程度复用, ...
- VueJs(11)---vue-router（命名路由，命名视图，重定向别名，路由组件传参）
vue-router 上篇文章讲了第一篇vue-router相关文章,文章地址:VueJs(10)---vue-router(进阶1) 一.命名路由 有时候,通过一个名称来标识一个路由显得更方便一些, ...
- vue子组件传参给父组件
关于父组件传参给子组件,可以看我另一篇文章 教程开始: 我们要实现的效果是:在子组件的Input框输入,父组件中实时更新显示.(也就是把子组件中的数据传给父组件) 一.子组件代码 template部分 ...
- vue父组件传参给子组件
其实组件之间传参有很多种方法: 1.通过本地存储 2.使用vuex状态管理 今天记录一下第三种方法 1.首页我们先创建一个项目(创建项目自行百度) 2.打开项目,在components文件夹下新建一个 ...
- 【vue】父向子组件传参、子组件向父传参
1.父向子组件传参 App.vue为父,引入componetA组件之后,则可以在App.vue中使用标签(注意驼峰写法要改成componet-a写法,因为html对大小写不敏感,componenta与 ...
- vue组件传参
一.父子组件的定义 负值组件的定义有两种,我称为常规父子组件和特殊父子组件. 1.1.常规父子组件 将其他组件以import引入用自定义标签接收,在当前组件中component里注册该标签,页面上可以 ...
随机推荐
- 7.2 Tornado异步
7.2 Tornado异步 因为epoll主要是用来解决网络IO的并发问题,所以Tornado的异步编程也主要体现在网络IO的异步上,即异步Web请求. 1. tornado.httpclient.A ...
- 【LeetCode】 202. Happy Number 解题报告（Java & Python & C++）
作者: 负雪明烛 id: fuxuemingzhu 个人博客: http://fuxuemingzhu.cn/ 目录 题目描述 题目大意 解题方法 递归 迭代 日期 [LeetCode] 题目地址:h ...
- 【九度OJ】题目1178：复数集合 解题报告
[九度OJ]题目1178:复数集合 解题报告 标签(空格分隔): 九度OJ http://ac.jobdu.com/problem.php?pid=1178 题目描述: 一个复数(x+iy)集合,两种 ...
- 【LeetCode】752. Open the Lock 解题报告（Python & C++）
作者: 负雪明烛 id: fuxuemingzhu 个人博客: http://fuxuemingzhu.cn/ 目录 题目描述 题目大意 解题方法 日期 题目地址:https://leetcode.c ...
- 【LeetCode】116. 填充每个节点的下一个右侧节点指针 Populating Next Right Pointers in Each Node 解题报告（Python）
作者: 负雪明烛 id: fuxuemingzhu 个人博客:http://fuxuemingzhu.cn/ 目录 题目描述 题目大意 解题方法 递归 日期 题目地址:https://leetcode ...
- D. Water Tree
D. Water Tree time limit per test 4 seconds memory limit per test 256 megabytes input standard input ...
- 使用Java对接永中格式转换
永中格式转换服务基于永中DCS的文档转换能力,支持不同格式文件之间的高质量互转,可实现PDF文档与Word.Excel.PPT.图片的高质量互转,PDF文档转换完美保留原文档的版式,格式等,转换效果出 ...
- BUG 记录：移位运算与扩展欧几里得算法
BUG 记录:移位运算与扩展欧几里得算法 起因 上个月就开始打算用C++写一个ECC的轮子(为什么?折磨自己呗!),奈何自己水平有点差,拖到现在才算写完底层的大数运算.在实现欧几里得算法的时候,我开始 ...
- 大数据分布式存储之Cassandra
分布式存储区别于集中式数据库存储,通过网络将海量数据存储到企业的各个数据节点(可能分布到不同的数据中心或机架上): 分布式存储需要考虑的问题 元数据管理 元数据是指数据本身的标识,通过元数据能很快的找 ...
- Java初学者作业——使用记事本编写Java程序
返回本章节 返回作业目录 需求说明: 使用记事本编写 Java 程序,输出"大家好!我的梦想是做一名 Java 高级工程师!". 为 Java 程序添加单行和多行注释以及文档注释. ...