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补充-NLTK包
自然语言处理(NLP)是指使用诸如英语之类的自然语言与智能系统进行通信的AI方法. 如果您希望智能系统(如机器人)按照您的指示执行操作,希望听取基于对话的临床专家系统的决策时,则需要处理自然语言. N ...
- springmvc上传图片到Tomcat虚拟目录
一.简介 通过把文件上传到tomcat的虚拟目录,实现代码和资源文件分开. 二.环境 spring+springmvc+mybatis 三.代码实现 1.导入文件上传的jar <dependen ...
- html5样式初始化，你值得拥有！！
/*万能清除法*/ *{padding:0;margin:0;} li{list-style: none;} img{vertical-align:top;border: 0; ...
- 8、如何将本地新创建的项目上传到gitHub（gitLab）上
Git 常用命令 1. cd 项目目录 2.git init //变成git仓库 3.git add . //将项目添加到本地仓库 4.git commit -m '备注' //将项目提交 ...
- QT多线程中使用QTcpSocket遇到的读写数据问题
多线程中使用QTcpSocket在run()方法中new QTcpSocket;然后监听readyRead()信号connect(m_pTcpSocket,SIGNAL(readyRead()),th ...
- android 第三方开源库 学习汇总
依赖注入框架ButterKnife https://github.com/JakeWharton/butterknife 学习过程 专注于android的View注入框架,并不支持其他方面 ...
- Java中 / 和 %
Java中 / 和 % 每天积累一些 Java 的知识点,补充自己的不足. 今天在刷面试题的碰到 % ,一下子还真想不起来这个运算符的作用,赶紧重温一下,这里我写了个小代码来体现 / 和 % 的区别. ...
- java获取客户端请求IP地址（公网ip）
之前写了一个获取ip地址的方法,但是放网上一查显示此Ip地址是局域网ip地址,要是想获取请求端的真实公网ip地址怎么样了,看了一些别人的博客后发现,想要获取客户端的公网ip必须借助第三方. packa ...
- Spring之IoC详解(非原创）
文章大纲 一.Spring介绍二.Spring的IoC实战三.IoC常见注解总结四.项目源码及参考资料下载五.参考文章 一.Spring介绍 1. 什么是Spring Spring是分层的Java ...
- java LinkedHashMap实现LRUCache缓存
package java_map; import java.util.Collections; import java.util.LinkedHashMap; import java.util.Map ...