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 ...
随机推荐
- Redis安装和基本使用
目录 Redis安装和基本使用 安装 配置 启动服务端 启动客户端 Redis键(key) 与键相关的基本命令 Redis字符串 常用字符串命令: Redis哈希 常用Hash命令 Redis 列表( ...
- delphi 接口
第四章 接口 前不久,有位搞软件的朋友给我出了个谜语.谜面是“相亲”,让我猜一软件术语.我大约想了一分钟,猜 出谜底是“面向对象”.我觉得挺有趣,灵机一动想了一个谜语回敬他.谜面是“ ...
- Object.freeze
Object.freeze() 方法可以冻结一个对象.一个被冻结的对象再也不能被修改:冻结了一个对象则不能向这个对象添加新的属性,不能删除已有属性,不能修改该对象已有属性的可枚举性.可配置性.可写性, ...
- day 68 作业
''' 有以下成绩单数据 scores = [ { name: 'Bob', math: 97, chinese: 89, english: 67 }, { name: 'Tom', math: 67 ...
- Python字符编码和转码
一:Python2 python2默认编码格式是ascii码,解释器解释代码时会将代码以及代码中的字符串等转换成ascii码再执行.这样会导致字符串输出或传输时,与当前环境编码格式不同的话会显示乱码. ...
- scikit-leanr 库中的 make_blobs() 函数
sklearn.datasets.make_blobs() 是用于创建多类单标签数据集的函数,它为每个类分配一个或多个正态分布的点集. sklearn.datasets.make_blobs( n_s ...
- python 和 R 语言 中的 range() 函数
1.python 中的 range() 函数生成整数序列,常用于 for 循环的迭代. 示例: 2.R 语言中的 range() 函数返回一个数值向量中的最小值和最大中,常用于求极差. 示例: 按语: ...
- 如何使用和关闭onbeforeunload 默认的浏览器弹窗事件
Onunload,onbeforeunload都是在刷新或关闭时调用,可以在<script>脚本中通过 window.onunload来指定或者在<body>里指定.区别在于o ...
- destoon聚合搜索页面模板
最近学习大型站点SEO策略,谈到关于大站需要做聚合页面tags,所以根据destoon系统自己做了一个聚合页面,在此分享给吾爱的朋友,一起学习参考! 模板演示站点:http://zhimo.yuanz ...
- UiPath： Selectors repair 选择器的修复，即被选择的按钮发生改变如何选择第二按钮
实现批量注册用户功能时,出现第一个用户注册完时,弹出确认按钮,点击即可,但是第二个用户注册完成时,弹出的按钮与第一个有差异,图形用户界面元素及其父元素的属性都发生改变.所以就点不了按钮,就卡死在这.如 ...