vue中父组件给子组件传值的方法
顺序.............................................
-------------列表组件，注册组件、调用使用组件-----------------
1，子组件可能很多地方用得到，所有子组件的数据来源来自父组件
父组件在调用子组件的地方，添加一个自定义的属性，属性的值就是需要传递给子组件的值,如果需要传递的值是一个变量，或者是boolean，或者是number类型，需要使用绑定属性
<my-list :list="list" :num="list.length"></my-list>
* 在子组件定义的地方，添加一个选项 props,方式一 props的值为数组，元素为自定义的属性名
const List = {
props: ['list'],
template: '#list'
}
可以在子组件中通过 自定义的属性名就可以拿到父组件传递的数据
2，子组件可能很多地方用得到，所有子组件的数据来源来自父组件
父组件在调用子组件的地方，添加一个自定义的属性，属性的值就是需要传递给子组件的值,如果需要传递的值是一个变量，或者是boolean，或者是number类型，需要使用绑定属性
<my-list :list="list" :num="list.length"></my-list>
* 在子组件定义的地方，添加一个选项 props, props的值是一个对象,key值为自定义的属性名，value值为数据类型 ---- 团队合作 提升代码的严谨性，如果数据类型不对，会有警告信息出现，但是不会阻止你的代码的渲染
const List = {
props: {
list: Number ！--（数据类型不对，数据依然会显示，但会警告（报错））
},
template: '#list'
}
可以在子组件中通过 自定义的属性名就可以拿到父组件传递的数据
3，子组件可能很多地方用得到，所有子组件的数据来源来自父组件
父组件在调用子组件的地方，添加一个自定义的属性，属性的值就是需要传递给子组件的值,如果需要传递的值是一个变量，或者是boolean，或者是number类型，需要使用绑定属性
<my-list :list="list" :num="list.length"></my-list>
在子组件定义的地方，添加一个选项 props, props的值是一个对象, key值是自定义的属性名，value值为一个对象，这个对象的key值分别为 type 和 default,表示数据类型和默认值,如果数据类型是 对象和 数组，默认值必须写为函数，其余直接赋值
const List = {
props: {
list: {
type: Array,
default: function () {
}
}
},
template: '#list'
}
可以在子组件中通过 自定义的属性名就可以拿到父组件传递的数据
-----------------------------------------------------以下是一段完整代码---------------------------------
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <meta http-equiv="X-UA-Compatible" content="ie=edge">
7 <title>Document</title>
33 </head>
34 <body>
35 <div id="app">
36 <my-content :shop='list' :num="list.length"></my-content>
37 </div>
38 </body>
39 <template id="content">
40 <ul>
41 <li v-for="(item, index) of shop" :key = 'index'>
42 <img :src="item.img" alt="">
43 <p>{{ item.title }}</p>
44 </li>
45 </ul>
46 </template>
47 <script src="../vue.js"></script>
48 <script>
49 //------第一种方法----------------
50 // const Content = {
51 // props: ['shop'],
52 // template: "#content"
53 // }
54 //------第二种方法----------------
55 // const Content = {
56 // props: {
57 // shop: Array
58 // },
59 // template: "#content"
60 // }
61 //------第三种方法----------------
62 const Content = {
63 template: "#content",
64 props: {
65 shop: {
66 type: Array,
67 default: function () {
68
69 }
70 }
71 }
72 }
73 new Vue({
74 el: '#app',
75 data: {
76 list: [{
77 img: 'https://img12.360buyimg.com/n7/jfs/t1/59022/28/10293/141808/5d78088fEf6e7862d/68836f52ffaaad96.jpg',
78 title: 'Apple iPhone 11 (A2223) 128GB 黑色 移动联通电信4G手机 双卡双待'
79 }, {
80 img: 'https://m.360buyimg.com/mobilecms/s750x750_jfs/t23386/9/1066712099/277967/615ccafb/5b4f0e3aN262237fc.jpg!q80.dpg.webp',
81 title: '【官方AppleCare+版】Apple MacBook Pro 15.4英寸笔记本电脑 深空灰色 配备Touch Bar 2018新款(八代i5/16G)'
82 }, {
83 img: 'https://img13.360buyimg.com/n7/jfs/t1/51521/12/10437/169738/5d780c40Eda0f0e1d/ccbc7745b343f87d.jpg',
84 title: 'Apple iPhone 11 Pro Max (A2220) 256GB 暗夜绿色 移动联通电信4G手机 双卡双待'
85 }, {
86 img: 'https://img11.360buyimg.com/n7/jfs/t1/53688/36/14138/113224/5db03763Ee6d8b784/5f5a3f4ce7490d36.jpg',
87 title: '【超级爆品】一加 OnePlus 7 Pro 2K+90Hz 流体屏 骁龙855旗舰 4800'
88 }]
89 },
90 components: {
91 'my-content': Content
92 }
93 })
94 </script>
95 </html>
vue中父组件给子组件传值的方法的更多相关文章
- vue中父级与子组件生命周期的先后顺序
1.vue的生命周期 2.views/createrCustormer.vue为父级 <template> <expressService /> </ ...
- Vue中利用$emit实现子组件向父组件通信
Vue中利用$emit实现子组件向父组件通信 父组件 <template> <div> <p>我是父组件</p> <child :isShow=& ...
- artdialog4.1.7 中父页面给子页面传值
artdialog4.1.7中父页面给子页面传值时看了一些网友的解决方法: 在父页面声明全局变量 var returnValue=“ ”,子页面用art.dialog.opener.returnVal ...
- layer.open中父页面向子页面传值
1.咱先看图说话 父list.jsp 子operate.jsp实现的代码1 在父页面上完成对子页面的数据渲染 function setData(data) { var lay=layer.open({ ...
- vue单文件组件形成父子（子父）组件之间通信（vue父组件传递数据给子组件，子组件传递数据给父组件）
看了很多文章,官网文档也有看,对父子组件通信说的不是很明白:决定自己总结一下: vue一般都使用构建工具构建项目:这样每个组件都是单文件组件:而网上很多文章都是script标签方式映入vue,组件通信 ...
- vue-父组件向子组件传值
一.父组件向子组件传值 其实该问题是说子组件如何访问父组件的属性和方法?那么根据对组件化的理解,无非就是要解决两个问题: 1.父组件如何将值传给子组件? 2.子组件如何获取父组件传递过来的值? 解读v ...
- Vue中父组件向子组件传值
Vue中父组件向子组件传值 相关Html: <!DOCTYPE html> <html lang="en"> <head> <meta c ...
- VUe.js 父组件向子组件中传值及方法
父组件向子组件中传值 1. Vue实例可以看做是大的组件,那么在其内部定义的私有组件与这个实例之间就出现了父子组件的对应关系. 2. 父子组件在默认的情况下,子组件是无妨访问到父组件中的数据的,所以 ...
- Vue中，父组件向子组件传值
1:在src/components/child/文件夹下,创建一个名为:child.vue的子组件 2:在父组件中,设置好需要传递的数据 3:在App.vue中引入并注册子组件 4:通过v-bind属 ...
- Vue中的父组件给子组件传值
父子组件传值: 父组件在调用子组件的地方,添加一个自定义的属性,属性的值就是你要传递给子组件的数据,如果值是一个变量,那么需要使用到绑定属性: 在子组件定义的地方,添加一个props选项,值为一个数组 ...
随机推荐
- vue3.0的生命周期函数
stetup(){}在 生命周期函数 系列中的优先级 〇setup(){ //优先级最高 处于created生命周期之前的函数,是无法访问data,methods中的数据是无法访问到的,setup中的 ...
- mysql数据迁移，通用windows->linux,linux->windows
1. 将用到的数据库文件夹直接拷贝到目标文件夹,mysql5.7在linux中默认在var/lib/mysql,将data下ibdata1也要拷贝进去 2. linux下需要将所有者root改为mys ...
- 7 Free Energies: 7.4 Umbrella Sampling Example
7.4 Umbrella Sampling Example计算丙氨酸二肽 Phi/Psi 旋转的 PMF http://ambermd.org/tutorials/advanced/tutori ...
- 解决df.to_csv 时增加重复双引号的问题
df.to_csv("test.csv", sep='|',quoting=csv.QUOTE_NONE,index=False,header=True) 转载自 df.to_cs ...
- 使用react-vite-antd，修改antd主题，报错 [vite] Internal server error: Inline JavaScript is not enabled. Is it set in your options? It is hacky way to make this function will be compiled preferentially by less
一般报错 在官方文档中,没有关于vite中如何使用自定义主题的相关配置,经过查阅 1.安装less yarn add less (已经安装了就不必再安装) 2.首先将App.css改成App.les ...
- （２）请用requests库的get()函数访问如下一个网站２０次，打印返回状态，text()内容，计算text()属性和content属性所返回网页内容的长度。
# 导入库 import requests from bs4 import BeautifulSoup def getUrlText(url): try: web = requests.get(url ...
- Javaweb学习笔记第五弹
preparedStatement 防止SQL注入:将敏感字符进行转义 1.获取PreparedStatement对象 String sql="selct * from 表名 where 列 ...
- 2.C/C++的const
1.C语言的const修饰的变量都有空间 2.C语言的const修饰的全局变量具有外部链接属性 3.C++语言的const修饰的变量有时有空间,有时没有空间(发生常量折叠,且没有对变量进行取址操作) ...
- Spring AOP面向切面编程案例 （注解驱动开发）
AOP(动态代理):指在程序运行期间动态的将某段代码切入到指定方法指定位置进行运行的编程方式:[1]导入 aop 模块:Spring AOP:(spring-aspects):[2]定义一个业务逻辑类 ...
- Kafka 之 HW 与 LEO
更多内容,前往 IT-BLOG HW(High Watermark):俗称高水位,它标识了一个特定的消息偏移量(offset),消费者只能拉取到这个 offset 之前的消息.分区 ISR 集合中的每 ...