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, 当父组件值被修改时,子组件能够实时的作出改变. 如果父子传值的类型是复杂数据 ...
随机推荐
- 主席树+LCA【p2633 (bzoj2588】 Count on a tree
Description 给定一棵N个节点的树,每个点有一个权值,对于M个询问(u,v,k),你需要回答u xor lastans和v这两个节点间第K小的点权.其中lastans是上一个询问的答案,初始 ...
- go时间转化
将string转化为time.Time layout := "2006-01-02 15:04:05" str := "2017-11-24 15:10:22" ...
- jQuery当中的事件(第六章ppt)
bink绑定事件 hover合成事件 代码示例: <!DOCTYPE html> <html> <head> <title>test1.html< ...
- Linux下CURL设置请求超时时间
使用CURL时,有两个超时时间:一个是连接超时时间,另一个是数据传输的最大允许时间. 连接超时时间用--connect-timeout参数来指定,数据传输的最大允许时间用-m参数来指定. 例如: cu ...
- B/S架构 Web打印程序(Argox)
B/S架构 Web打印程序 对于B/S架构下的管理软件系统,在客户端浏览器页面中如何透过本地打印机或网络打印机打印条码标签,Argox提供最常用的2种类型打印机集成方案. ● PPLA 打印机IE游 ...
- oracle 中的%type,%rowtype
oracle 中的%type,%rowtype1.使用%TYPE 在许多情况下,PL/SQL变量可以用来存储在数据库表中的数据.在这种情况下,变量应该拥有与表列相同的类型.例如,students表的f ...
- isNaN使用的注意事项
NaN是JavaScript的特殊值,表示 Not a Number 用法: isNaN(numValue); 如果值是 NaN, 那么 isNaN 函数返回 true ,否则返回 false . 注 ...
- Web服务器在外网能裸奔多久?
很多时候我们轻易地把Web服务器暴露在公网上,查看一下访问日志,可以看到会收到大量的攻击请求,这个是网站开通后几个小时收到的请求: 1. 探测服务器信息 在上线一分钟,收到OPTION请求探测. ...
- cocos2dx开发中的lua继承与覆盖C++方法
http://www.litefeel.com/lua-override-userdata/
- leetcode练习之No.7------ 翻转整数reverse_integer
原文地址:http://www.niu12.com/article/48 git地址:git@github.com:ZQCard/leetcode.git 给定一个 32 位有符号整数,将整数中的数字 ...