顺序.............................................

-------------列表组件，注册组件、调用使用组件-----------------

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中父组件给子组件传值的方法的更多相关文章

  1. vue中父级与子组件生命周期的先后顺序

    1.vue的生命周期 2.views/createrCustormer.vue为父级     <template>     <expressService />   </ ...

  2. Vue中利用$emit实现子组件向父组件通信

    Vue中利用$emit实现子组件向父组件通信 父组件 <template> <div> <p>我是父组件</p> <child :isShow=& ...

  3. artdialog4.1.7 中父页面给子页面传值

    artdialog4.1.7中父页面给子页面传值时看了一些网友的解决方法: 在父页面声明全局变量 var returnValue=“ ”,子页面用art.dialog.opener.returnVal ...

  4. layer.open中父页面向子页面传值

    1.咱先看图说话 父list.jsp 子operate.jsp实现的代码1 在父页面上完成对子页面的数据渲染 function setData(data) { var lay=layer.open({ ...

  5. vue单文件组件形成父子（子父）组件之间通信（vue父组件传递数据给子组件，子组件传递数据给父组件）

    看了很多文章,官网文档也有看,对父子组件通信说的不是很明白:决定自己总结一下: vue一般都使用构建工具构建项目:这样每个组件都是单文件组件:而网上很多文章都是script标签方式映入vue,组件通信 ...

  6. vue-父组件向子组件传值

    一.父组件向子组件传值 其实该问题是说子组件如何访问父组件的属性和方法?那么根据对组件化的理解,无非就是要解决两个问题: 1.父组件如何将值传给子组件? 2.子组件如何获取父组件传递过来的值? 解读v ...

  7. Vue中父组件向子组件传值

    Vue中父组件向子组件传值 相关Html: <!DOCTYPE html> <html lang="en"> <head> <meta c ...

  8. VUe.js 父组件向子组件中传值及方法

    父组件向子组件中传值 1.  Vue实例可以看做是大的组件,那么在其内部定义的私有组件与这个实例之间就出现了父子组件的对应关系. 2. 父子组件在默认的情况下,子组件是无妨访问到父组件中的数据的,所以 ...

  9. Vue中，父组件向子组件传值

    1:在src/components/child/文件夹下,创建一个名为:child.vue的子组件 2:在父组件中,设置好需要传递的数据 3:在App.vue中引入并注册子组件 4:通过v-bind属 ...

  10. Vue中的父组件给子组件传值

    父子组件传值: 父组件在调用子组件的地方,添加一个自定义的属性,属性的值就是你要传递给子组件的数据,如果值是一个变量,那么需要使用到绑定属性: 在子组件定义的地方,添加一个props选项,值为一个数组 ...

随机推荐

  1. jquery 选择器 或 且

    jquery选择器具有很强大的功能,基本的使用方法随处可见,jquery还提供了更为方便的使用. 且:$("div[id^='AAA_']div[id$='_DIV']"),此选择 ...

  2. redis单机搭建

    1.获取redis wget http://download.redis.io/releases/redis-6.2.7.tar.gz tar -xvf redis-6.2.7.tar.gz 2.安装 ...

  3. Vue解决后台传过来的时间展示时带T

    用空格替换: {{scope.row.ctime.toLocaleString().replace(/T/g, ' ').replace(/\.[\d]{3}Z/, '')}} 参考作者:https: ...

  4. C++编码注意事项

    1. vector,string不能按位赋值(vector用push_back, string用重载"+"号)

  5. c++实现类似python的map一样，批量操作一个vector的功能【python一样写c++、三】

    python里有一个东西,叫map. 它可以实现像这样,对list每个元素进行操作,并返回新的list(python3是迭代器) 像这样 a=list(map(int,input().split()) ...

  6. Less-5 和 Less-6 SQL盲注

    判断注入点 测试:http://localhost/sqli-labs-master/Less-5/?id=1a和http://localhost/sqli-labs-master/Less-5/?i ...

  7. 【RSocket】使用 RSocket（二）——四种通信模式实践

    Source Code: https://github.com/joexu01/rsocket-demo 0. 四种通信模式 让我们来简单复习一下 RSocket 的四种通信模式: 即发即忘 - Fi ...

  8. 利用SpringBoot实现数据库的增删改查（具体实现）

    前言 本次主要是想利用SpringBoot的框架实现一下数据库的增删改查,所以只有一个较为简单的表作为案例 具体实现 1.在配置文件中配置一下相关内容 2.在pom.xml文件中导入相关坐标 3.编写 ...

  9. Java面试——消息队列

    一.消息队列的使用场景 ☞ 以下介绍消息队列在实际应用常用的使用场景.异步处理.应用解耦.流量削锋和消息通讯四个场景.[1]异步处理:场景说明:用户注册后,需要发注册邮件和注册短信.  引入消息队列后 ...

  10. ArcMap安装OSM路网数据编辑插件ArcGIS Editor for OSM的方法

      本文介绍在ArcGIS下属的ArcMap软件中,ArcGIS Editor for OpenStreetMap这一工具集插件的下载与安装的具体方法.   ArcGIS Editor for Ope ...