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 ...
随机推荐
- ElasticSearch查看删除关闭索引
curl -XDELETE 'http://10.1.2.2:9200/iis_log_2019-07' #删除名为/iis_log_2019-07的索引 curl -XPOST 'http: ...
- Java常用类object详解
1.Object概述: 类Object是类层次结构的根类.每个类都使用Object作为超类.所有对象(包括数组)都实现这个类的方法. 2.构造方法详细信息: Object只有一个无参构造方法,因为ob ...
- JavaScript之二十三种设计模式
23种JavaScript设计模式 原文链接:https://boostlog.io/@sonuton/23-javascript-design-patterns-5adb006847018500 ...
- 【转载】Gradle学习 第十一章：使用Gradle命令行
转载地址:http://ask.android-studio.org/?/article/94 This chapter introduces the basics of the Gradle com ...
- Django rest framework ---- 权限
Django rest framework ---- 权限 添加权限 api/utils文件夹下新建premission.py文件,代码如下: message是当没有权限时,提示的信息 # FileN ...
- Python的诞生和各种解释器
一:Python的诞生 参考:https://www.jianshu.com/p/1cc1382e5e04 二:Python的各种解释器 参考:https://www.liaoxuefeng.co ...
- LAMP架构性能测试+php优化
性能测试:1. 首先查看一下服务器的硬件性能free -m ---->查看一下内存的情况lscpu或者cat /proc/cpuinfo ------à查看一下cpu的情况2. ...
- django rest framework 认证组件
1.认证组件 1.认证组件 1.认证组件 1.认证组件
- vs2008 vc90.pdb 不是创建此预编译头时使用的 pdb 文件，请重新创建预编译头
解决方案: 找到项目中的stdafx.cpp,右键属性,找到C/C++->预编译头, 设置为创建预编译头, 重新生成
- centos定时删除log文件
#!bin/bash #获取年 time=$(date "+%Y") #查找并删除7天前的文件 find /opt/applog/travelsky -type f -mtime ...