Vue基础知识之组件及组件之间的数据传递(五)
vue中的组件是自定的标签,可以扩展的原生html元素,封装可复用的代码
note:
1、在标签命中不要使用大写,标签名字必须用短横线隔开
2、模板中只能有一个根元素,不能使用并列标签。
定义组件
- 全局定义,在所有实例中都可以使用这个组件
<template id='hello'>
<div>
<div>hello</div>
<div>world</div>
</div>
</template>
let data={msg:'world'}
Vue.component('myComponent',{
template:'#hello',//通过模板的ID来引用这个组件
return {msg:'world'};//此时不能return data;这样会导致如果有多个实例运用这个组件会导致,三者共享同一个data,改变其中一个,会导致其他的都改变。对象变量会导致共享数据。
})
此时就可以在实例中使用my-component标签。
- 局部定义
let vm=new Vue({
el:'#app',
data:{msg:'hello'},
components:{
'my-component'(myComponent):{
template:'<h1>{{msg}}</h1>',
data(){
return {msg:'world'};
}
}
}
})
1、子组件不能直接使用父组件的数据
2、子组件可以声明自己的数据
组件之间的数据传递
1、每个组件是没关系的,都应该产生自己的数据。在组件中data使用的方法和默认的vm一样。只是data不再是对象而是函数。组件可以无限嵌套。
2、声明组件的名字,不能为已经存在的标签
3、组件的嵌套,子组件必须写在父组建的模板中才能使用
- 1、父级向子级传递数据(传递的属性值)
1、如果直接写a='b'格式传递的是字符串,动态数据获取用的是v-bind,一般无论是动态还是静态,我们都会采用:。
2、:msg='meat',meat是变量;msg='meat',meat是字符串,:msg="'meat'",meat是字符串
3、子级不能直接改变父级的数据,如果要修改可以将父级的数据修改后赋值给子级的变量,可以使用data或者computed
<div id=app>
<child :data='aaa' :data1="bbb"></child>
//此处,在子组件中左边的是子组件的接收,用props接收,如果是放在数组中每一项就是一个字符串,右边是从父级传递的数据。
</div>
<script>
let vm=new Vue({
el:'#app',
data:{
aaa:'xxxxx',
bbb:'yyyyy'
}
components:{//
child:{
props:['data','data1'],
template:'<div>{{msg}}</div>',
data(){
return {msg:this.data+'zxvv'}
},
computed:{
msg:{
get(){
return this.data+'zxvv'
}
}
}
}
}
})
</script>
props
中的validate
:
1、props:['xx','yy','zz'];
2、props:{
aa:{
type:[Number,String],//选择值得类型符不符合要求
default:'acac',//默认值
validator(val){//校验函数
return val>200//返回false,校验失败。
}
required:true,//代表属性必须填
}
}
- 2、子级向父级传递数据(借助于事件)
1、子级$emit后会触发自己身上的某一个自定的方法,这个方法对应的函数在父级的身上。
<div id="app1">
{{datas}}
<child @get-data="getData"></child>//自定义方法写在自己身上,右边的是父级对应方法的函数
</div>
let vm1 = new Vue({
el: '#app1',
data: {
datas: '',//用来接收自己传递的空数据
},
methods: {
getData(msg){//接受的参数就是从子级传递过来的数据
this.datas = msg;
}
},
components: {
child: {
template: `<div><button @click="say">{{msg}}</button></div>`,//绑定触发事件
methods: {
say(){//触发事件,以及自定义方法
this.$emit('get-data', this.msg);//这里的this指的是当前子组件
}
},
data(){
return {
msg: 'xxx'
}
}
}
}
})
- 3、兄弟之间传递数据
1、兄弟之间传递数据需要借助于事件车,通过事件车的方式传递数据eventBus
2、创建一个Vue的实例,让各个兄弟共用同一个事件机制。
3、传递数据方,通过一个事件触发bus.$emit(方法名,传递的数据)。
4、接收数据方,通过mounted(){}触发bus.$on(方法名,function(接收数据的参数){用该组件的数据接收传递过来的数据}),此时函数中的this已经发生了改变,可以使用箭头函数。
slot
具名slot,通过组件传入模板,每个模板指定是slot名字,这个名字和定制模板匹配到,会替换定制的模板。
slot是vue中提供的一个标签,用来做模板定制的。属性,事件,定制模板组成了组件的API。
**使用slot分发内容**
为了让组件可以组合,我们需要一种防暑混合父组件的内容与子组件自己的模板。这个过程被称作内容分发(transclusion),vue.js实现了一个内容分发API,使用特殊的<slot>元素作为原始内容的插槽。
**编译作用域**
父组件模板的内容在父组件作用域内编译;子组件模板的内容在子组件作用域内编译。
**单个slot**
除非子组件模板包含至少一个 <slot> 插口,否则父组件的内容将会被丢弃。当子组件模板只有一个没有属性的 slot 时,父组件整个内容片段将插入到 slot 所在的 DOM 位置,并替换掉 slot 标签本身。
最初在 <slot> 标签中的任何内容都被视为备用内容。备用内容在子组件的作用域内编译,并且只有在宿主元素为空,且没有要插入的内容时才显示备用内容。
**具名slot**
<slot>元素可以用有个特殊的属性name来配置如何分发内容。多个slot可以有不同的名字。具名slot将匹配内容片段中对应slot特性的元素。但任然可以有一个匿名slot,它是默认的slot,作为找不到匹配的内容片段的备用插槽。如果没有默认的slot,这些找不到匹配的内容将被抛弃。
递归组件
组件在它的模板内可以递归地调用自己。recursive 递归组件,自己调用自己,必须有中断条件。
默认情况下,递归组件是不会执行的,要制定name属性(只在局部组件中需要添加),全局逐渐不需要加name属性。
动态组件
is可以指定当前标签内可以指定插入什么元素,可以防止解析出错。
radio中默认没有绑定数据,要给value值,这个value值会映射到radio上
<keep-alive>
<component :is="rad"></component><!--缓存组件的上一次状态,防止每次切换时都需要渲染组件-->
</keep-alive>
Vue基础知识之组件及组件之间的数据传递(五)的更多相关文章
- Vue 爬坑之路(二)—— 组件之间的数据传递
Vue 的组件作用域都是孤立的,不允许在子组件的模板内直接引用父组件的数据.必须使用特定的方法才能实现组件之间的数据传递. 首先用 vue-cli 创建一个项目,其中 App.vue 是父组件,com ...
- 解决vue不相关组件之间的数据传递----vuex的学习笔记,解决报错this.$store.commit is not a function
Vue的项目中,如果项目简单, 父子组件之间的数据传递可以使用 props 或者 $emit 等方式 进行传递 但是如果是大中型项目中,很多时候都需要在不相关的平行组件之间传递数据,并且很多数据需要 ...
- Vue之组件之间的数据传递
Vue的组件作用域都是孤立的,不允许在子组件的模板内直接引用父组件的数据,必须使用特定的方法才能实现组件之间的数据传递. 下列为在vue-cli创建项目中的操作 一·父组件向子组件传递数据 在Vue中 ...
- 【整理】解决vue不相关组件之间的数据传递----vuex的学习笔记,解决报错this.$store.commit is not a function
解决vue不相关组件之间的数据传递----vuex的学习笔记,解决报错this.$store.commit is not a function https://www.cnblogs.com/jaso ...
- (转)Vue 爬坑之路(二)—— 组件之间的数据传递
Vue 的组件作用域都是孤立的,不允许在子组件的模板内直接引用父组件的数据.必须使用特定的方法才能实现组件之间的数据传递. 首先用 vue-cli 创建一个项目,其中 App.vue 是父组件,com ...
- React中父组件与子组件之间的数据传递和标准化的思考
React中父组件与子组件之间的数据传递的的实现大家都可以轻易做到,但对比很多人的实现方法,总是会有或多或少的差异.在一个团队中,这种实现的差异体现了每个人各自的理解的不同,但是反过来思考,一个团队用 ...
- vue基础知识之vue-resource/axios
Vue基础知识之vue-resource和axios(三) vue-resource Vue.js是数据驱动的,这使得我们并不需要直接操作DOM,如果我们不需要使用jQuery的DOM选择器,就没 ...
- Vue基础知识之vue-resource和axios
Vue基础知识之vue-resource和axios 原文链接:http://www.cnblogs.com/Juphy/p/7073027.html vue-resource Vue.js是数据驱 ...
- Angular06 组件、模块、父子组件之间的数据传递
1 创建组件 进入到angular项目的根目录,执行如下命令 ng g component test-component 注意:执行完上述命令后在angular项目的src/app文件夹下就会多出一个 ...
随机推荐
- 修改类不重启tomcat 自动加载项目
可以修改类不用重启Tomcat加载整个项目(手工启动) 配置reloadable=true(自动重载) 使用Debug模式,前提是仅限于局部修改.(修改类不用重启--热加载) Tomc ...
- Python高手之路 ------读书有感
最近忙中偷闲把前些年买的<Python高手之路>翻了出来,大致看完了一遍,其中很多内容并不理解,究其原因应该是实践中的经验不足,而这对于现如今的我仍是难以克服的事情,对此也就只能说是看会了 ...
- GPIO口的输入输出模式
1.浮空输入 GPIO_Mode_IN_FLOATING 2.带上拉输入 GPIO_Mode_IPU 3.带下拉输入 GPIO_Mode_IPD 4.模拟输入 ...
- Codeup1085: 阶乘的和
题目描述 有些数可以表示成若干个不同阶乘的和.例如,9=1!+2!+3!.小明对这些数很感兴趣,所以他给你一个正整数n,想让你告诉他这个数是否可以表示成若干个不同阶乘的和. 输入 输入包含多组测试数据 ...
- 【liunx】端口号的占用情况查看
Linux如何查看端口 1.lsof -i:端口号 用于查看某一端口的占用情况,比如查看8000端口使用情况,lsof -i:8000 # lsof -i:8000 COMMAND PID USER ...
- test20180828
所有试题限制都为512MB,1Sec 总分230. 试题1 新的开始 [题目描述] 发展采矿业当然首先得有矿井, 小FF花了上次探险获得的千分之一的财富请人在岛上挖了n口矿井, 但他似乎忘记考虑的矿井 ...
- MySQL--”自然键”和”代理键”优缺点
##=====================================================================================## 在数据库表设计中会纠 ...
- javabean(实体类)转Map类型
javabean(实体类)转Map类型 从网上"風亦飞"的导出EXCEL的源代码提取出来的.认为非常好用.分享一下给大家,主要看beanToMap方法就OK了 /*以下是从poi导 ...
- Javascript Array 方法整理
Javascript Array 方法整理 Javascript 数组相关方法 说明 大多数其它编程语言不允许改变数组大小,越界访问索引会报错,但是 javascript不会报错,不过不建议直接修改a ...
- 使用 ASMCMD 工具管理ASM目录及文件
============================== -- 使用ASMCMD 工具管理ASM目录及文件 --============================== 在ASM实例中,所有的 ...