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, 当父组件值被修改时,子组件能够实时的作出改变. 如果父子传值的类型是复杂数据 ...
随机推荐
- ATM-java
通过学习JAVA,我的进步不是很多,了解了不多的编程知识,但是我一直在进步,我发现我有很大的进步空间,每天都有一点点的进步使我每天都很充实.还记得我编写的第一个 经典程序“hello Word”.从那 ...
- 一个简单的 openssl 示例
////生成一个私钥////$key=openssl_pkey_new();openssl_pkey_export($key,$out);//等于下面写入的内容////将私钥写入一个文件////ope ...
- Bow and Arrow Rigging in Blender
https://www.youtube.com/watch?v=jpsd0Aw1qvA 新建骨架,由如下图3部分组成: Bone.000.Top ~ Bone.015.Top (上半部分16节骨骼) ...
- 【BZOJ4300】 绝世好题
傻逼题都不能一眼看出思路…… 原题: 给定一个长度为n的数列ai,求ai的子序列bi的最长长度,满足bi&bi-1!=0(2<=i<=len). n<=100000,ai&l ...
- SpringBoot企业级博客开发
1.springboot生成项目 PS : 进入项目,输入gradle build,生成build文件夹: 然后进入libs有jar,使用java jar进行运行项目 PS: 这个项目没有准守res ...
- java黑魔法-反射机制-01
在java的帮助文档中,java.lang包中有一个Class类,注意这里的"C“是大写,所以这个不是表示类的声明,而是一个真正的类.在java的帮助文档中,这样定义的Class类: pub ...
- 如何对oracle数据库进行监控检查
sqlplus '/as sysdba' 手动生成一个oracle数据库的快照 execute dbbms_workload_repository.create_snapshot(); 执行自动工作负 ...
- webpack常用配置
webpack --help或webpack -h 列出命令行所有可用的配置选项 webpack --config example.config.js 指定其他的配置文件.配置默认文件为webpack ...
- caller
caller返回调用了当前函数的那个对象(谁call了当前函数,即当前函数的caller) 对于函数来说,caller 属性只有在函数执行时才有定义 假如函数是由顶层(window)调用的,那么 ca ...
- NonAction与ChildActionOnly
NonAction 表示它不是一个真正的Action,而是一个普通方法: ChildActionOnly 表示它只能在View中通过Html.Action或Html.RenderAction来使用