vue父子组件（1.0）
1、父子组件
在上一篇随笔中展示了vue的组件，当我们继续在组件中写组件，形成组件嵌套的时候，就是我们所说的父子组件了。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue</title>
<script src="bower_components/vue/dist/vue.js"></script>
<style>
</style>
</head>
<body>
<div id="box">
<aaa></aaa>
</div>
<script>
var vm=new Vue({
el:'#box',
data:{
a:'aaa'
},
components:{
'aaa':{
template:'<h2>我是aaa组件</h2><bbb></bbb>',
components:{
'bbb':{
template:'<h3>我是bbb组件</h3>'
}
}
}
}
}); </script>
</body>
</html>
在上面的例子中，外层的组件aaa就是父组件，内层的bbb组件便是子组件了。
2、子组件获取父组件的数据
我们知道，每个组件都可以有自己的data属性，组件的数据在整个组件的内部都是可以使用的，那么在下面的例子中，组件bbb是aaa的子组件，存在于组件aaa的内部，为什么不能使用aaa的数据呢？
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue</title>
<script src="bower_components/vue/dist/vue.js"></script>
</head>
<body>
<div id="box">
<aaa></aaa>
</div> <template id="aaa">
<h1>11111</h1>
<bbb></bbb>
</template>
<script>
var vm=new Vue({
el:'#box',
data:{
a:'aaa'
},
components:{
'aaa':{
data(){
return {
msg2:'我是父组件的数据'
}
},
template:'#aaa',
components:{
'bbb':{
template:'<h3>我是bbb组件->{{msg2}}</h3>'
}
}
}
}
});
</script>
</body>
</html>
这是因为，在vue中，组件实例的作用域是孤立的，默认情况下，父子组件的数据是不能共享的，也就是说，子组件是不能直接访问父组件的数据的。为此，vue给我们提供了一个数据传递的选项prop，用来将父组件的数据传递给子组件。具体使用如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue</title>
<script src="bower_components/vue/dist/vue.js"></script>
</head>
<body>
<div id="box">
<aaa></aaa>
</div> <template id="aaa">
<h1>11111</h1>
<bbb :m="msg"></bbb>
</template>
<script>
var vm=new Vue({
el:'#box',
data:{
a:'aaa'
},
components:{
'aaa':{
data(){
return {
msg:'我是父组件的数据'
}
},
template:'#aaa',
components:{
'bbb':{
props:['m'],
template:'<h3>我是bbb组件->{{m}}</h3>'
}
}
}
}
});
</script>
</body>
</html>
在使用prop时，我们需要在子组件中使用v-bind将父组件数据和子组件的自定义属性m进行绑定，这个自定义m就是我们在子组件的props中定义。一个组件默认可以拥有任意数量的prop，任何值都可以传递给任何的prop，所以我们在上面使用的是props来存储prop列表，这个props既可以是个数组，也可以是个对象。需要注意的是，props中的prop列表需要使用驼峰式命令法。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue</title>
<script src="bower_components/vue/dist/vue.js"></script>
</head>
<body>
<div id="box">
<aaa></aaa>
</div>
<template id="aaa">
<h1>11111</h1>
<bbb :m="msg2" :my-msg="msg"></bbb>
</template>
<script>
var vm=new Vue({
el:'#box',
data:{
a:'aaa'
},
components:{
'aaa':{
data(){
return {
msg:111,
msg2:'我是父组件的数据'
}
},
template:'#aaa',
components:{
'bbb':{
props:{
'm':String,
'myMsg':Number
},
template:'<h3>我是bbb组件->{{m}} <br> {{myMsg}}</h3>'
}
}
}
}
});
</script>
</body>
</html>
在父组件通过props向子组件传递数据时，根据需求不同，分为静态props和动态props，所谓静态props，就是子组件要显示地用props选项声明它期待获取的数据；而动态props则是动态的绑定父组件的数据到子组件的props，使用v-bind进行绑定，当父组件的数据变化时，该变化也会传递给子组件。另外需要说明的是数字的传递，在使用静态props传递数字时，它在子组件中的值是字符串，如果想传递一个实际的 number，需要使用 v-bind，从而让它的值被当作JS表达式计算 ，可以使用动态props，在data属性中设置对应的数字1。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue</title>
<script src="bower_components/vue/dist/vue.js"></script>
</head>
<body>
<div id="box">
<aaa></aaa>
</div> <template id="aaa">
<h1>11111</h1>
<bbb message="静态props" c-message="ppp" :c-mess="pmsg" mess1="1" :mess2="2" :mess3="num"></bbb>
</template>
<script>
var vm=new Vue({
el:'#box',
data:{
a:'aaa'
},
components:{
'aaa':{
data(){
return {
'pmsg':'动态props',
'num':3,
}
},
template:'#aaa',
components:{
'bbb':{
props:['message','cMessage','c-mess','mess1','mess2','mess3'],
template: `
<div>
<div>{{message}} ---- {{cMessage}} --- {{cMess}}</div>
<div>
{{mess1}}是{{ type(mess1) }}类型<br>
{{mess2}}是{{ type(mess2) }}类型<br>
{{mess3}}是{{ type(mess3) }}类型<br>
</div>
<div>
`,
methods:{
type(text){
return typeof text;
}
}
}
}
}
}
});
</script>
</body>
</html>
3、父组件获取子组件的数据
和上面不一样的是，父组件想要获取子组件的数据时，需要子组件通过emit主动将自己的数据发送给父组件。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue</title>
<script src="bower_components/vue/dist/vue.js"></script>
</head>
<body>
<div id="box">
<aaa></aaa>
</div>
<template id="aaa">
<span>我是父级 -> {{msg}}</span>
<bbb @child-msg="get"></bbb>
</template>
<template id="bbb">
<h3>子组件-</h3>
<input type="button" value="send" @click="send">
</template>
<script>
var vm=new Vue({
el:'#box',
data:{
a:'aaa'
},
components:{
'aaa':{
data(){
return {
msg:111,
msg2:'我是父组件的数据'
}
},
template:'#aaa',
methods:{
get(msg){
this.msg=msg;
}
},
components:{
'bbb':{
data(){
return {
a:'我是子组件的数据'
}
},
template:'#bbb',
methods:{
send(){
this.$emit('child-msg',this.a);
}
}
}
}
}
}
});
</script>
</body>
</html>
首先，我们需要在子组件中触发一个主动发送数据的事件，上面的例子中是一个点击事件send；其次，在点击事件中使用emit方法，这个emit接收两个参数：传递数据的事件和需要传递的数据，这个传递数据的事件也是自定义的；然后在父组件中引用子组件，并在引用的子组件中使用on监听上一步传递数据的事件，上面的例子中是child-msg；最后在父组件中使用这个事件，这个事件带有一个参数，就是从子组件发送过来的数据。
4，sync
首先，在下面的例子中，子组件获取了父组件的数据后进行了更改，但是更改的是子组件的内部。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue</title>
<script src="vue1.0.js"></script>
</head>
<body>
<template id="child">
<div>
<span>我是子组件</span>
<input type="button" value="按钮" @click="change">
<strong>{{msg}}</strong>
</div>
</template>
<div id="box">
父级: ->{{a}}
<br>
<child-com :msg="a"></child-com>
</div>
<script>
new Vue({
el:'#box',
data:{
a:'我是父组件数据'
},
components:{
'child-com':{
props:['msg'],
template:'#child',
methods:{
change(){
this.msg='被更改了'
}
}
}
}
});
</script>
</body>
</html>
也就是说我们改变的并不是父组件的a，而是子组件的msg，那么如果我们需要同时改变父组件的数据呢，就需要用到sync了，只需要对上面的代码稍作改变就可以了。
vue父子组件（1.0）的更多相关文章
- vue父子组件之间传值
vue父子组件进行传值 vue中的父子组件,什么是父组件什么是子组件呢?就跟html标签一样,谁包裹着谁谁就是父组件,被包裹的元素就是子组件. 父组件向子组件传值 下面用的script引入的方式,那种 ...
- vue父子组件的传值总结
久违的博客园我又回来了.此篇文章写得是vue父子组件的传值,虽然网上已经有很多了.写此文章的目的就是记录下个人学习的一部分.接下来我们就进入主题吧! 在开发vue项目中,父子组件的传值是避免不掉的. ...
- 【转】vue父子组件之间的通信
vue父子组件之间的通信 在vue组件通信中其中最常见通信方式就是父子组件之中的通性,而父子组件的设定方式在不同情况下又各有不同.最常见的就是父组件为控制组件子组件为视图组件.父组件传递数据给子组件使 ...
- Vue父子组件生命周期
转载自:https://blog.csdn.net/a8725585/article/details/79092505 vue父子组件钩子函数触发顺序 beforeMount后mounted前构造子组 ...
- vue父子组件传值加例子
例子:http://element-cn.eleme.io/#/zh-CN/component/form 上进行改的 父传子:用prop:子组件能够改变父组件的值,是共享的,和父操作是 ...
- vue 父子组件通信详解
这是一篇详细讲解vue父子组件之间通信的文章,初始学习vue的时候,总是搞不清楚几个情况 通过props在父子组件传值时,v-bind:data="data",props接收的到底 ...
- vue组件定义方式，vue父子组件间的传值
vue组件定义方式,vue父子组件间的传值 <!DOCTYPE html> <html lang="zh-cn"> <head> <met ...
- Vue父子组件相互传值及调用方法的方案
Vue父子组件相互传值及调用方法的方案 一.调用方法: 1.父组件调用子组件方法: 2.子组件调用父组件方法: 参考:https://www.cnblogs.com/jin-zhe/p/9523782 ...
- vue父子组件
vue父子组件 新建 模板 小书匠 为什么要厘清哪个是父组件,哪个是子组件? 一开始浏览器接收和要显示的数据非常少,此时无需划分区域进行布局.随着页面数据量的增加,如果单纯一个窗口来加载和显示数据, ...
- 关于Vue父子组件传值(复杂数据类型的值)的细节点
vue 父子组件传值是很常见的,多数情况下都是父传递给子的值是基础数据类型,如string,number,boolean, 当父组件值被修改时,子组件能够实时的作出改变. 如果父子传值的类型是复杂数据 ...
随机推荐
- c# 敏捷3 连接，批量处理，分页
class Program { public class post { public int id { get; set; } public string name { get; set; } pub ...
- 【HDOJ图论题集】【转】
=============================以下是最小生成树+并查集====================================== [HDU] How Many Table ...
- EXtJS Ext.data.Model
(一).首先我们介绍一下Model类中比较常用的几个属性,如果我们想构建一个Model类,最主要的属性就是(Fields)属性,这个属性接受一个数组.用来设置Model中所包含的字段.定义的格式如下: ...
- (98)Address already in use: make_sock: could not bind to address 0.0.0.0:80
问题说明80端口被占用,用netstat -nlp |grep :80命令看看有什么进程占用了80端口,发现是httpd进程. 没想到安装了两个apache,我安装apache2.4的时候删除了2.2 ...
- 新鲜出炉一份Java面试清单，共200+道题
一.Java 基础 1.JDK 和 JRE 有什么区别? 答:JRE是java运行时环境,包含了java虚拟机,java基础类库.是使用java语言编写的程序运行所需要的软件环境,是提供给想运行jav ...
- 网易的Airtest
使用心得:https://testerhome.com/topics/12391 下载路径:https://airtest.netease.com/
- python之路---11 第一类对象 函数名 闭包 迭代器
二十九. 1.函数名的运用 ①函数名是⼀个变量, 但它是⼀个特殊的变量, 与括号配合可以执⾏函数的变量 ②函数名是一个内存地址 ③ 函数名可以赋值给其他变量 ④函数名可以当 ...
- 图像识别的前期工作——使用pillow进行图像处理
pillow是个很好用的python图像处理库,可以到官方网站下载最新的文件.如果官网的任何PIL版本都不能与自己的python版本对应,或安装成功后发现运行出错,可以尝试从一个非官方的whl网站下载 ...
- apache2 配置虚拟主机
查看 apache2 的配置位置: whereis apache2 我的在:/etc/apache2 sites-available 文件夹下面放的就是 虚拟站点的配置文件: 随便复制一个改改: c ...
- 自定义flume的hbase sink 的序列化程序
package com.hello.hbase; import java.nio.charset.Charset; import java.text.SimpleDateFormat; import ...