vue 父子组件属性传递
父子组件属性传递
注意:0、谁被引用,谁就算子组件
1、属性命名最好完全小写,否则需要如下格式转换:myAttr == my-attr
2、引入的vue组件后必须通过 components 注册才能使用
3、属性的传递必须子组件 props 注册才能使用
4、prop默认是单向绑定:当父组件的属性变化时,将传导给子组件,但是反过来不会。这是为了防止子组件无意修改了父组件的状态,除非在父组件属性传递时加上 .sync 就可实现双向绑定,如 v-bind:myname.sync = "name"
5、赋值时,不可同名,譬如说:title = "title"、那么会报错(其中一方改为mytitle就可以了)。顺便一提,在<template>中不存在赋值字符串,必须在<script>中使用 data 绑定传递
神坑:想要传递属性,必须让子组件注册 props 才可以(废话)
子组件:mycomponent.vue:
<template>
<table>
<tr>
<th colspan="3">子组件数据</td>
</tr>
<tr>
<td>my name</td>
<td>{{ myname }}</td>
<td><input type="text" v-model="myname" /></td>
</tr>
<tr>
<td>my age</td>
<td>{{ myage }}</td>
<td><input type="text" v-model="myage" /></td>
</tr>
</table>
</template> <script>
export default {
props: {
myname : String,
myage : String
}
}
</script>
父组件:App.vue
知识点:调用其他组件模块,需要先import(require)、然后在加入components的中
补充:其实这里不写data也是可以的
<template>
<table>
<tr>
<th colspan="3">父组件数据</td>
</tr>
<tr>
<td>name</td>
<td>{{ name }}</td>
<td><input type="text" v-model="name" /></td>
</tr>
<tr>
<td>age</td>
<td>{{ age }}</td>
<td><input type="text" v-model="age" /></td>
</tr>
</table>
<mycomponent :myname.sync = "name" :myage = "age"></mycomponent>
</template> <script> import mycomponent from './components/mycomponent' export default {
data () {
return {
name : "Lee",
age : 18
}
},
components : {
mycomponent
}
}
</script> <style>
* {margin: 0; padding: 0; box-sizing: border-box } html {font-size: 12px; font-family: Ubuntu, simHei, sans-serif; font-weight: 400 } body {font-size: 1rem } table, td, th {border-collapse: collapse; border-spacing: 0 } table {width: 100% } td, th {border: 1px solid #bcbcbc; padding: 5px 10px } th {background: #42b983; font-size: 1.2rem; font-weight: 400; color: #fff; cursor: pointer } tr:nth-of-type(odd) {background: #fff } tr:nth-of-type(even) {background: #eee } fieldset {border: 1px solid #BCBCBC; padding: 15px; } input {outline: none } input[type=text] {border: 1px solid #ccc; padding: .5rem .3rem; } input[type=text]:focus {border-color: #42b983; } button {outline: none; padding: 5px 8px; color: #fff; border: 1px solid #BCBCBC; border-radius: 3px; background-color: #009A61; cursor: pointer; } button:hover{opacity: 0.8; } #app {margin: 0 auto; max-width: 640px } .form-group {margin: 10px; } .form-group > label {display: inline-block; width: 10rem; text-align: right; } .form-group > input, .form-group > select {display: inline-block; height: 2.5rem; line-height: 2.5rem; } .text-center{text-align: center; } .pagination {display: inline-block; padding-left: 0; margin: 21px 0; border-radius: 3px; } .pagination > li {display: inline; } .pagination > li > a {position: relative; float: left; padding: 6px 12px; line-height: 1.5; text-decoration: none; color: #009a61; background-color: #fff; border: 1px solid #ddd; margin-left: -1px; list-style: none; } .pagination > li > a:hover {background-color: #eee; } .pagination .active {color: #fff; background-color: #009a61; border-left: none; border-right: none; } .pagination .active:hover {background: #009a61; cursor: default; } .pagination > li:first-child > a .p {border-bottom-left-radius: 3px; border-top-left-radius: 3px; } .pagination > li:last-child > a {border-bottom-right-radius: 3px; border-top-right-radius: 3px; }
</style>
vue 父子组件属性传递的更多相关文章
- vue 父子组件相互传递数据
例子一 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta ...
- Vue父子组件通信(父级向子级传递数据、子级向父级传递数据、Vue父子组件存储到data数据的访问)
Vue父子组件通信(父级向子级传递数据.子级向父级传递数据.Vue父子组件存储到data数据的访问) 一.父级向子级传递数据[Prop]: ● Prop:子组件在自身标签上,使用自定义的属性来接收外界 ...
- Vue.js 父子组件相互传递数据
父传子 : 子组件接收变量名=父组件传递的数据 如::f-cmsg="fmsg" 注意驼峰问题 子传父:@子组件关联的方法名 = 父组件接受的方法名 如:@func=" ...
- vue父子组件之间传值
vue父子组件进行传值 vue中的父子组件,什么是父组件什么是子组件呢?就跟html标签一样,谁包裹着谁谁就是父组件,被包裹的元素就是子组件. 父组件向子组件传值 下面用的script引入的方式,那种 ...
- vue父子组件的传值总结
久违的博客园我又回来了.此篇文章写得是vue父子组件的传值,虽然网上已经有很多了.写此文章的目的就是记录下个人学习的一部分.接下来我们就进入主题吧! 在开发vue项目中,父子组件的传值是避免不掉的. ...
- 【转】vue父子组件之间的通信
vue父子组件之间的通信 在vue组件通信中其中最常见通信方式就是父子组件之中的通性,而父子组件的设定方式在不同情况下又各有不同.最常见的就是父组件为控制组件子组件为视图组件.父组件传递数据给子组件使 ...
- vue 父子组件通信详解
这是一篇详细讲解vue父子组件之间通信的文章,初始学习vue的时候,总是搞不清楚几个情况 通过props在父子组件传值时,v-bind:data="data",props接收的到底 ...
- vue父子组件
vue父子组件 新建 模板 小书匠 为什么要厘清哪个是父组件,哪个是子组件? 一开始浏览器接收和要显示的数据非常少,此时无需划分区域进行布局.随着页面数据量的增加,如果单纯一个窗口来加载和显示数据, ...
- 关于Vue父子组件传值(复杂数据类型的值)的细节点
vue 父子组件传值是很常见的,多数情况下都是父传递给子的值是基础数据类型,如string,number,boolean, 当父组件值被修改时,子组件能够实时的作出改变. 如果父子传值的类型是复杂数据 ...
随机推荐
- ganglia笔记:rrds目录
因为原来的rrds目录挂载的盘不够用了,所以想修改一下目录,遇到权限的问题. 在一个owner为user的目录下面新建了./ganglia/rrds目录,并且./ganglia及其子文件夹都修改为ga ...
- HYSBZ - 2038 小Z的袜子 (莫队算法)
A1206. 小Z的袜子 时间限制:1.0s 内存限制:512.0MB 总提交次数:744 AC次数:210 平均分:44.44 将本题分享到: 查看未格式化的试题 ...
- RequireJS 2.0初探
就在前天晚上RequireJS发布了一个大版本,直接从version1.0.8升级到了2.0.随后的几小时James Burke又迅速的将版本调整为2.0.1,当然其配套的打包压缩工具r.js也同时升 ...
- IntelliJ IDEA控制台输出中文乱码问题解决
如果还不行,那么再极端的设置,在IDEA启动的时候强制设置为UTF-8: 打开增加-Dfile.encoding=UTF-8,重启Intellij IDEA 再或者直接在项目运行的时候加入UTF-8的 ...
- druid 配置监控界面和开启spring支持
1.配置监控页面 <!-- JNDI方式配置数据源 --> <!-- <bean id="dataSource" class="org.sprin ...
- PostgreSQL on Linux 最佳部署手册
安装常用包 # yum -y install coreutils glib2 lrzsz mpstat dstat sysstat e4fsprogs xfsprogs ntp readline-de ...
- 搭建MongoDB分片集群
在部门服务器搭建MongoDB分片集群,记录整个操作过程,朋友们也可以参考. 计划如下: 用5台机器搭建,IP分别为:192.168.58.5.192.168.58.6.192.168.58.8.19 ...
- 各版本JDK1.5-1.8新特性
概述 一jdk15新特性 泛型 foreach 自动拆箱装箱 枚举 静态导入Static import 元数据Metadata 线程池 Java Generics 二jdk16新特性 Desktop类 ...
- MyBatis批量添加、修改和删除
1.批量添加元素session.insert(String string,Object o) 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 ...
- 怎样优化cocos2d/x程序的内存使用和程序大小
再次感谢原创者:Steffen Itterheim.原创博客原文地址: http://www.learn-cocos2d.com/2012/11/optimize-memory-usage-bundl ...