Vue ---- 组价 组件化 子传父 父传子

目录

• 补充js的for循环:

补充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);
                }
            }
        }