vue父子（父传子）传值
vue2.0中，实现父子组件间的传值，需要依靠一个props的属性，作为变量接收的对象。
注：vue.js文件引用的是本地的js文件，拷贝本机运行时，可以使用cnd替换。
https://www.bootcdn.cn/vue/
该网址为一个优化的 vue插件的cnd加速地址，可以使用指定版本的cdn文件来运行代码！
代码如下：
<!DOCTYPE html>
<html> <head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>props父子传值</title>
<script src="vue.min.js" type="text/javascript" charset="utf-8"></script>
<style type="text/css">
* {
margin: 0;
padding: 0;
} .artLis {
width: 300px;
border: 2px solid red;
border-radius: 5px;
margin: 10px auto;
} .artLis p {
color: palevioletred;
font-family: "arial narrow";
padding-left: 5%;
} .artLis div {
text-align: right;
padding-right: 10%;
color: #008000;
}
</style>
</head> <body>
<div id="app">
<mu-ban v-for='item in atrs' :dt='item'></mu-ban>
</div>
<script type="text/javascript">
Vue.component('muBan', {
props: ['dt'],
template: `
<div class="artLis">
<hr>
<p>{{dt.title}}</p>
<div>{{dt.msg}}</div>
</div>`
}); let app = new Vue({
el: '#app',
data: {
atrs: [{
title: '星期天',
msg: '玩儿'
}, {
title: '星期一',
msg: '上学'
}, {
title: '星期二',
msg: '写作业'
}, {
title: '星期三',
msg: '练车'
}, {
title: '星期四',
msg: '考试'
}, {
title: '星期五',
msg: '等待下班'
}, {
title: '星期六',
msg: '小周末'
}, ]
}
});
</script>
</body> </html>
vue父子（父传子）传值的更多相关文章
- Vue父子组件传值 | 父传子 | 子传父
父传子 父容器 <template> <div> <zdy :module='test'></zdy> </div> </templa ...
- vue小故事之父子(上下级)通信之父传子props
vue小故事之父子(上下级)通信之父传子props vue 父子(上下级)通信 props 或许你对父子通信有点迷糊,为什么这样那样父子之间就可以通信了,以下通过一个小故事来进行解说,故事模型或许有 ...
- vue的组件通讯 父传子 -- 子传父-- 兄弟组件的传值 vue的组件传值
首先文字简单撸一下 父子传子 -------首先在父组件上绑定一个属性,在子组件里用props接收,可以是数组或者是对象 子传父 ------在父组件升上自定义一个方法,在子组件里通过this ...
- vue 组件之间相互传值 父传子 子传父
1.父传子 把要传入的值放到父标签里 子组件使用props接收 父写法 子写法 2.子传父 子组件: childrenOnclick() { // 发布自定义事件 this.$emit(" ...
- uniapp和vue 父向子传值、传方法及子向父传值。（一看就会超级简约）
1.父向子传值:父组件在引用子组件时通过自定义属性绑定自身需要传递的值(数据),子组件用props:[ '自定义' ]接收即可使用(props里数据是只读模式).(简约版:子绑定父的属性并用pro ...
- vue传值 ---- >> 父传子，props()
父组件: 1 <template> 2 <div class="comment"> 3 <div>comment ...
- 深度剖析Vue中父给子、子给父、兄弟之间传值！
本片文章将为您详细讲解在Vue中,父给子传值.子给父传值以及兄弟之间传值方式! 父传子:父组件 // template里面 <aa :info="name"/> // ...
- vue子传父、父传子
子传父 vue子传父使用$emit传值 子组件: <template> <div> <button @click="toParent">点击传到 ...
- Vue ---- 组价 组件化 子传父 父传子
目录 补充js的for循环: 组件 1.组件的分类: 2.组件的特点 3.创建局部组件 4.全局组件 二.组件化 一.组件传参父传子 二.组件传参:子传父 补充js的for循环: // for in遍 ...
- vue 评论 computed watch 分隔符 局部组件 全局组件 子传父消息|父传子消息
评论案例 splice: (start 几位,替换(新增)内容) splice(0,0,内容)在头部插入内容 splice(0,1) 把索引为0的往后删除1位 splice(0,1,内容)把索引为0 ...
随机推荐
- python 学习之 基础篇二 字符编码
声明: 博文参考1:字符编码发展历程(ASCII,Unicode,UTF-8) 博文参考2:Python常见字符编码间的转换 (1)为什么要用字符编码 早期的计算机使用的是通电与否的特性的真空管,如果 ...
- loj#10172 涂抹果酱 (状压DP)
题目: #10172. 「一本通 5.4 练习 1」涂抹果酱 解析: 三进制的状压DP 经过简单的打表发现,在\(m=5\)时最多有\(48\)种合法状态 然后就向二进制一样枚举当前状态和上一层的状态 ...
- uni-app插件ColorUI步骤条
1. uni-app插件ColorUI步骤条 1.1. 前言 uni-app就不介绍了,前面几篇已经有所介绍,不知道的可以翻看我前面几篇博客 ColorUI-uniApp是uni-app的一款ui组件 ...
- ChengDu University Mental Health Test 需求分析文档
ChengDu University Mental Health Website 需求分析文档 V4.0 编制人:刘雷,黄凯 日期:2019/4/28 版本修订历史记录: 版本 日期 修改内容 作者 ...
- 第05节-BLE协议物理层(PHY)
对于软件的人来说,物理层关注的内容会少一点.在前面的博客中,我们以快递员类比物理层,对于快递员来说,道路千万条,这条不通换另外一条.对于物理层来说也是一样的,它有很多频率,这个频率有冲突了,将会切到另 ...
- phpcms添加https后台分页错误的解决方法
今天修改一位客户的phpcms网站,他要求添加https,这对ytkah来说是轻车熟路了,但是后台稍微有点问题,点击分页出现错误,将鼠标移到下一页显示的链接是https://www.abc.com/w ...
- Python实战之ATM+购物车
ATM + 购物车 需求分析 ''' - 额度 15000或自定义 - 实现购物商城,买东西加入 购物车,调用信用卡接口结账 - 可以提现,手续费5% - 支持多账户登录 - 支持账户间转账 - 记录 ...
- Tomcat8 访问 manager App 失败
Tomcat8 访问 manager App 失败 进入 tomcat 8 的下面路径 修改 上面 的 context.xml 注释了下面的框框 保存退出.重启tomcat
- NOIP 2013 积木大赛
洛谷 P1969 积木大赛 洛谷传送门 JDOJ 2229: [NOIP2013]积木大赛 D2 T1 JDOJ传送门 题目描述 春春幼儿园举办了一年一度的"积木大赛".今年比赛的 ...
- python3中“->”的含义
->:标记返回函数注释,信息作为.__annotations__属性提供 __annotations__属性是字典.键return是用于在箭头后检索值的键.但是在Python中3.5,PEP 4 ...