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选项,值为一个数组 ...
随机推荐
- Docker不启动容器的情况下修改配置文件
应用场景: 1.容器中配置文件错误无法启动. 2.任何不启动容器时修改配置文件. 方法: 1.Copy容器中的配置文件出来. 2.修改此配置文件 3.将配置文件重新覆盖回容器内 命令 docker c ...
- windows server 2012 AD域服务器的搭建安装 子域的创建加入 客户机加入域环境（Active Directory域)
1,安装Active Directory域前的准备工作 2,安装Active Directory域 3,加入子域(可选) 4,加入客户机 ******************************* ...
- [jointjs] 端口（port）
关于端口,我也不知道怎么解释,就用joint官网的这句话先打个头. Many diagramming applications deal with the idea of elements with ...
- uglfy
uglify: npm install uglify-js -g 或者用npm install uglify-es 运行: uglifyjs demo.js -m -o demo.min.js Ugl ...
- DVWA-Command Injection(命令执行)
命令执行漏洞,顾名思义,服务端在进行一些网站的操作.管理的时候,需要调用系统命令,如果对传入的命令参数没有进行一些过滤,可以直接执行服务器系统的命令终端 LOW 审计源码 <?php // 判断 ...
- 使用Git进行版本控制，不同的项目怎么设置不同的提交用户名和邮箱呢？
1.全局设置用户名和邮箱 因为平时除了开发公司项目还会写自己的项目或者去维护开源项目,一般情况下,公司会要求提交代码时使用自己的真名或者拼音和公司邮箱,以前就只会设置全局用户名或邮箱如下 git co ...
- Shell脚本之while read line的用法
Shell脚本之while read line的用法 while read line do - done < file read通过输入重定向,把file的第一行所有的内容赋值给变量line,循 ...
- 推荐一套轻量级的开源图床系统：Light Fast Picture
如果您跟我一样平时有些博客的习惯,那么图片存储是否有困扰过你呢?今天就给大家推荐一款不错的开源图床系统:Light Fast Picture 它是一个基于koa + vue3.x + typescri ...
- Git 仓库7K stars！学Java开源项目austin要多久？
我是3y,一年CRUD经验用十年的markdown程序员常年被誉为职业八股文选手 开源项目消息推送平台austin仓库地址: 消息推送平台推送下发[邮件][短信][微信服务号][微信小程序][企业微 ...
- Kakao Brain 的开源 ViT、ALIGN 和 COYO 文字-图片数据集
最近 Kakao Brain 在 Hugging Face 发布了一个全新的开源图像文本数据集 COYO,包含 7 亿对图像和文本,并训练了两个新的视觉语言模型 ViT 和 ALIGN ViT 和 A ...