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 ...
随机推荐
- Zabbix+Grafana打造高逼格监控系统
第一章 zabbix监控的意义 1.1 为什么要监控 业务安全性的保障 系统的保障 产品持续性的运行 1.2 监控的内容 1.3 zabbix的选择性 [x] 纯命令监控太局限性 [x] 监控三剑客( ...
- Mac 下安装 jdk
1.安装jdk 我们是需要java环境的- 到oracle官网下载se: Java SE Development Kit 8 Downloads https://www.oracle.com/tech ...
- javascript中的12种循环遍历方法1
1:for循环 let arr = [1,2,3]; for(let i =0;i<arr.length;i++){ console.log(i,arr[i]) } //for循环是js中最常用 ...
- 在React中写一个Animation组件，为组件进入和离开加上动画/过度
问题 在单页面应用中,我们经常需要给路由的切换或者元素的挂载和卸载加上过渡效果,为这么一个小功能引入第三方框架,实在有点小纠结.不如自己封装. 思路 原理 以进入时opacity: 0 --> ...
- <Android Studio> 4.Adapter的那些事 <一>
android 的表格显示和Windows桌面开发原理不同,其他平台转过来的同学要有心理准备,不要拿桌面开发的思维模式来思考android上的各种表格. 一.原理 此处使用ArrayAdapter来记 ...
- c#执行sql超时
超时分为多种,SqlConnection有超时选项, SqlDataAdapter也有超时选项设置如下: SqlConnection:就用链接字符串给予的Timeout设置就行单位秒: SqlData ...
- angular6 页面加载数据时的loading提示
使用npm安装ngx-loading模块 npm install --save ngx-loading 在app.module.ts中导入模块 import { BrowserModule } fro ...
- rz上传文件乱码
问题 使用rz上传文件时,出现乱码,上传失败. 原因 文件中包含控制字符 解决方法 使用 rz -be -b:–binary 用binary的方式上传下载,不解释字符为ascii: -e:–esca ...
- Linux的DNS主从服务器部署
下面的部署是在Linux的DNS正向解析部署上进行修改的. 如果有什么问题或者错误,可以访问上篇帖子 下面开始有关DNS的服务部署.<DNS主从服务器> 环境描述: 192.168.196 ...
- 良心送分题(牛客挑战赛35E+虚树+最短路)
目录 题目链接 题意 思路 代码 题目链接 传送门 题意 给你一棵树,然后把这棵树复制\(k\)次,然后再添加\(m\)条边,然后给你起点和终点,问你起点到终点的最短路. 思路 由于将树复制\(k\) ...