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, 当父组件值被修改时,子组件能够实时的作出改变. 如果父子传值的类型是复杂数据 ...
随机推荐
- SQLI DUMB SERIES-6
less6 输入 ?id=1" 说明双引号未被过滤,输入的id被一对双引号所包围,存在注入点,可以闭合双引号. 而输入正常时 情况和less5相同,因此注入同less5.
- BZOJ 2002：Bounce 弹飞绵羊（分块）
2002: [Hnoi2010]Bounce 弹飞绵羊 Time Limit: 10 Sec Memory Limit: 259 MB Submit: 14944 Solved: 7598 [Su ...
- C++学习（十八）（C语言部分）之 指针2
指针1.指针的概述 指针是什么? 指针是一个地址 是一个常量 int 整型 int a a是变量 指针用来做什么? 方便使用数组或者字符串 像汇编语言一样处理内存地址2.指针变量 什么是指针变量? 是 ...
- debian 配置linuxptp 软件时间戳
编程之路刚刚开始,错误难免,希望大家能够指出. ntp,ptp,ntp,ptp 本文只说软件时间戳 先上几个推荐的网址,可以更好的了解ptp: https://docs.fedoraproject.o ...
- 【NOI2005】 聪聪可可
树分治劲啊 原题: 聪聪和可可是兄弟俩,他们俩经常为了一些琐事打起来,例如家中只剩下最后一根冰棍而两人都想吃.两个人都想玩儿电脑(可是他们家只有一台电脑)……遇到这种问题,一般情况下石头剪刀布就好了, ...
- Vue的路由动态重定向和导航守卫
一.重定向 重定向也是通过 routes 配置来完成,下面例子是从 /a 重定向到 /b: const router = new VueRouter({ routes: [ { path: '/a', ...
- Gravitee.io api gateway 试用
以前写过几篇关于整体介绍的以及 使用docker 运行的简单说明,有了docker-compose 环境我们可以 方便的进行测试使用了. 环境准备 docker-compose 文件 versio ...
- Ubuntu16.04 64位编译安装Hi3520D_SDK_V1.0.4.0
1.复制uboot/tools/mkimage到环境变量路径 2.修改kernel/timeconst.pl,删除define 3.busybox makefile修改: /itc_work/hi35 ...
- jquery 实现的全选demo
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <script sr ...
- 关于TF-IDF的解释
TF:term frequency ,词频 .指的是 term 出现的评率.词频和 2 个因数有关,在一个文档中出现这个词条次数越多,词频越高,文档总词条总数越多这个值被稀释. 所以 一般 TF = ...