vue2.0中，实现父子组件间的传值，需要依靠一个props的属性，作为变量接收的对象。

注：vue.js文件引用的是本地的js文件，拷贝本机运行时，可以使用cnd替换。

  1. https://www.bootcdn.cn/vue/

　　该网址为一个优化的 vue插件的cnd加速地址，可以使用指定版本的cdn文件来运行代码！

代码如下：

  1.  <!DOCTYPE html>
  2.  <html>
  3.  
  4.  <head>
  5.      <meta charset="utf-8" />
  6.      <meta name="viewport" content="width=device-width, initial-scale=1">
  7.      <title>props父子传值</title>
  8.      <script src="vue.min.js" type="text/javascript" charset="utf-8"></script>
  9.      <style type="text/css">
  10.          * {
  11.              margin: 0;
  12.              padding: 0;
  13.          }
  14.  
  15.          .artLis {
  16.              width: 300px;
  17.              border: 2px solid red;
  18.              border-radius: 5px;
  19.              margin: 10px auto;
  20.          }
  21.  
  22.          .artLis p {
  23.              color: palevioletred;
  24.              font-family: "arial narrow";
  25.              padding-left: 5%;
  26.          }
  27.  
  28.          .artLis div {
  29.              text-align: right;
  30.              padding-right: 10%;
  31.              color: #008000;
  32.          }
  33.      </style>
  34.  </head>
  35.  
  36.  <body>
  37.      <div id="app">
  38.          <mu-ban v-for='item in atrs' :dt='item'></mu-ban>
  39.      </div>
  40.      <script type="text/javascript">
  41.          Vue.component('muBan', {
  42.              props: ['dt'],
  43.              template: `
  44.              <div class="artLis">
  45.                  <hr>
  46.                  <p>{{dt.title}}</p>
  47.                  <div>{{dt.msg}}</div>
  48.              </div>`
  49.          });
  50.  
  51.          let app = new Vue({
  52.              el: '#app',
  53.              data: {
  54.                  atrs: [{
  55.                      title: '星期天',
  56.                      msg: '玩儿'
  57.                  }, {
  58.                      title: '星期一',
  59.                      msg: '上学'
  60.                  }, {
  61.                      title: '星期二',
  62.                      msg: '写作业'
  63.                  }, {
  64.                      title: '星期三',
  65.                      msg: '练车'
  66.                  }, {
  67.                      title: '星期四',
  68.                      msg: '考试'
  69.                  }, {
  70.                      title: '星期五',
  71.                      msg: '等待下班'
  72.                  }, {
  73.                      title: '星期六',
  74.                      msg: '小周末'
  75.                  }, ]
  76.              }
  77.          });
  78.      </script>
  79.  </body>
  80.  
  81.  </html>

vue父子（父传子）传值的更多相关文章

  1. Vue父子组件传值 | 父传子 | 子传父

    父传子 父容器 <template> <div> <zdy :module='test'></zdy> </div> </templa ...

  2. vue小故事之父子(上下级)通信之父传子props

    vue小故事之父子(上下级)通信之父传子props vue 父子(上下级)通信 props  或许你对父子通信有点迷糊,为什么这样那样父子之间就可以通信了,以下通过一个小故事来进行解说,故事模型或许有 ...

  3. vue的组件通讯 父传子 -- 子传父-- 兄弟组件的传值 vue的组件传值

    首先文字简单撸一下 父子传子   -------首先在父组件上绑定一个属性,在子组件里用props接收,可以是数组或者是对象 子传父   ------在父组件升上自定义一个方法,在子组件里通过this ...

  4. vue 组件之间相互传值 父传子 子传父

    1.父传子 把要传入的值放到父标签里  子组件使用props接收 父写法 子写法 2.子传父 子组件: childrenOnclick() { // 发布自定义事件 this.$emit(" ...

  5. uniapp和vue 父向子传值、传方法及子向父传值。（一看就会超级简约）

    1.父向子传值:父组件在引用子组件时通过自定义属性绑定自身需要传递的值(数据),子组件用props:[  '自定义'  ]接收即可使用(props里数据是只读模式).(简约版:子绑定父的属性并用pro ...

  6. vue传值 ---- >> 父传子，props()

    父组件:     1 <template> 2     <div class="comment"> 3         <div>comment ...

  7. 深度剖析Vue中父给子、子给父、兄弟之间传值！

    本片文章将为您详细讲解在Vue中,父给子传值.子给父传值以及兄弟之间传值方式! 父传子:父组件 // template里面 <aa :info="name"/> // ...

  8. vue子传父、父传子

    子传父 vue子传父使用$emit传值 子组件: <template> <div> <button @click="toParent">点击传到 ...

  9. Vue ---- 组价 组件化 子传父 父传子

    目录 补充js的for循环: 组件 1.组件的分类: 2.组件的特点 3.创建局部组件 4.全局组件 二.组件化 一.组件传参父传子 二.组件传参:子传父 补充js的for循环: // for in遍 ...

  10. vue 评论 computed watch 分隔符 局部组件 全局组件 子传父消息|父传子消息

    评论案例 splice: (start 几位,替换(新增)内容) splice(0,0,内容)在头部插入内容 splice(0,1) 把索引为0的往后删除1位  splice(0,1,内容)把索引为0 ...

随机推荐

  1. spring data jpa hql动态查询案例

    目的:根据入参条件不同,动态组装hql里的where语句. 1. 实现代码 public List<WrapStatis> queryStatisCriteriaBuilder(Strin ...

  2. MySQL查询——select

    SELECT select的完整语法: select col1, col2,... # 业务查询的字段 from table_name # 选取的哪张表 [where single_condition ...

  3. 英语CollaCoriiAsini阿胶CollaCoriiAsini单词

    阿胶(colla Corii Asini)始载于<神农本草经>,是马科动物驴的皮去毛后熬制而成的胶块,其性味甘.平,具有滋阴润肺,补血.止血等功效.主要治疗血虚萎黄,眩晕心悸,肌痿无力,心 ...

  4. Mysql 主从一致校验工具------Maatkit工具包

    Maatkit工具包 http://www.maatkit.org/ 简介 maatkit是一个开源的工具包,为mysql日常管理提供了帮助.目前,已被Percona公司收购并维护.其中: mk-ta ...

  5. Ninja使用Visual Studio(cl.exe)构建

    目录 Ninja基本步骤 Ninja在VS2015下的问题和解决 Ninja命令行参数 Ninja错误的调用了gcc Ninja基本步骤 Ninja的作用是加速构建,最初目的是替代make,现在Win ...

  6. Django框架（十）--常用字段、参数、元信息、多对多关联关系

    一.ORM字段 # AutoField() int自增列,必须填入参数 primary_key=True.当model中如果没有自增列,则自动会创建一个列名为id的列 # IntegerField() ...

  7. 嵌入式linux开发uboot启动内核的机制(二)

    一.嵌入式系统的分区 嵌入式系统部署在Flash设备上时,对于不同SoC和Flash设备,bootloader.kernel.rootfs的分区是不同的.三星S5PV210规定启动设备的分区方案如下: ...

  8. 00-赵志勇机器学习-Logistics_Regression-data.txt（转载）

    4.45925637575900 8.22541838354701 0 0.0432761720122110 6.30740040001402 0 6.99716180262699 9.3133933 ...

  9. Vyos的基本配置

    修改用户密码 Enter configuration mode configure Set password set system login user [username] authenticati ...

  10. js 浮点数计算精度不准确问题

    或许很多人都遇到过,js 对小数的加.减.乘.除时经常得到一些奇怪的结果! 比如 :0.1 + 0.2 = 0.3  ? 这么一个简单的计算,当你用js 计算时会发现结果是:0.30000000000 ...