补充js的for循环:
// for in遍历的是取值关键 | for of遍历的是值
组件
概念:html, css, js的集合体命名 ,用该名字复用html,css,js组合成的集合体 体现了复用性
1.组件的分类:
// 根组件:new Vue() 生产的组件
// 局部组件: 组件名 = {} , {}内部采用的是vue语法
// 全局组件: Vue.component('组件名', {}) , {}内部采用的是vue语法
2.组件的特点
1.组件都有管理组件html页面的结果的 template 实例成员, template 中有且只有一个根标签
挂载点本质是被组价template模块进行替换的占位符
// 总结: 根组件,可以不明确template, template默认采用挂载点页面结构:如果设置的template, 挂载点内部的内容无效,因为会被替换
// 解释: html, body 标签不能被替换,所以不能为挂载点.
// template 渲染真实dom 替换虚拟dom
2.根组件都是作为最顶层父组件, 局部与全局组价作为子组价, 也可以成为其他局部与全局的父组件
3.子组件的数据需要隔离(数据组件化,每一个组件拥有自己的数据的独立名称空间)
4.局部组件必须注册后才能使用,全局不需要注册,提倡使用局部组件
5.组件中出现的所有变量(模板中,逻辑中) 由该组价自己提供管理
6.局部 全局 根组件 都是一个vue实例, 一个实对应一套html, css, js结构, 所以实例就是组件
3.创建局部组件
// 声明局部组件:局部组件要在其父在组件中注册才能使用
// 1.声明组件 2.注册组件 3.渲染组件
声明:
let localTag = {
template:'<a>pass</a>',
methods:{
pass
}
}
// 注册在components:{}里注册 key 和 value 如果一样可以简写 key
Vue({
el:'xx',
components:{
localTag
}
})
但是在html中的tag不支持大写 所以用 - 来代替
<local-tag></local-tag>
4.全局组件
// 声明局部组件:局部组件要在其父在组件中注册才能使用
// 1.声明组件 2.渲染组件
Vue.component('组件名', {
template:'<a>pass</a>',
methods:{
pass
}
} )
<组件名></组件名>
二.组件化
每个组件的数据应该是隔离的 但是data里的数据大家访问的都是同一个 所以要让他产生自己的局部作用域
let localTag = {
data:funttion(){
return {
num:0
}
data(){
return {
num:0
} // 数据需要组件化，作为方法的返回值（方法执行后会产生一个局部作用域）
}
}
template:'<a>{{num}}</a>',
methods:{
pass
}
}
// 局部或全局取件,一个组件可能会被重复使用多次, 每个组件都应该有自己独立的名称空间
// 数据需要组件化,作为方法的返回值(return{} 里面放入数据就行)
一.组件传参父传子
// 1）子组件可以通过props自定义组件属性（采用反射机制，需要填写字符串，但是使用时可以直接作为变量）
// 2）子组件会在父组件中渲染，渲染时，将父组件的变量绑定给子组件的自定义属性，将可以将变量值传递给子组件
关键字:props
在子标签中规定自定义标签 然后在子组件中填写props:['xx'] 来获取对应的值
<text-tag :abc="xxx"></Text-tag>
let textTag ={
props: ['xxx']
};
同时, 在里面调用该值也需要 使用属性绑定来获取 因为传来的是变量!
二.组件传参:子传父
// 自定义组件标签的事件
// 自定义事件是属于子组件的，子组件在父组件中渲染并绑定事件方法，所以事件方法由父组件来实现
// 子组件如何触发自定义事件：this.$emit('自定义事件名', 触发事件回调的参数们)
// 子组件触发自定义事件，携带出子组件的内容，在父组件中实现自定义事件的方法，拿到子组件传递给父组件的消息
子组件如何触发自定义事件:
<!--this.$emit('自定义事件名', 触发事件回调的参数们)-->
<tag @action="actionFn"></tag>
父组件的methods方法
methods: {
actionFn(a, b, c) {
// console.log('触发了', a, b, c);
this.h1 = a;
this.h3 = b;
},
}
子组件的methods方法
methods: {
changeTitle() {
if (this.t1 && this.t2) {
this.$emit('action', this.t1, this.t2);
}
}
}