自我总结55

组件

概念：html、css、js的计划人体，为该集合体命名，用该名字复用html、css、js组成的集合体

vue实例就代表组件

组件用template实例成员管理html结构，有且只有一个根标签

子组件可以复用，所以数据要组件化处理，data的值由方法的返回值提供

组件分类

根组件：new Vue（）生成的组件

局部组件：let 组件名={ },{ }内部采用的vue语法，只有在注册的父组件中才能使用

全局组件：Vue.component('组件名'，{})，{}内部采用的是vue语法，不用注册可以在任何地方使用

组件的特点

1）组件都有管理组件html页面结果的 template 实例成员，template中有且只有一个根标签
2）根组件都是作为最顶层父组件，局部与全局组件作为子组件，也可以成为其他局部与全局组件的父组件
3）子组件的数据需要隔离(数据组件化，每一个组件拥有自己数据的独立名称空间)
4）局部组件必须注册后才能使用，全局组件不需要注册，提倡使用局部组件
5）组件中出现的所有变量（模板中、逻辑中），由该组件自己提供管理
6) 局部全局和根组件都是一个vue实例，一个实例对应一套html、css、js结构，所以实例就是组件

子组件

声明局部组件：局部组件要在其父组件中注册才能使用。申明组件，注册组件，渲染组件，全局不需要注册

局部或全局组件 ，一个组件可能被用多次

自定义组件标签事件

事件是属于子组件的，子组件在父组件中渲染并绑定事件方法，所以事件方法由父组件来实现

<!-- 父传子：自定义属性 -->
    <tag :info="msg"></tag>

        let tag = {
            props: ['info'],
        }
        new Vue({
            data: {msg: 12345}
            components: {
                tag,
            }
        })


<!-- 子传父：自定义事件 -->
	<tag :info="msg"></tag>
	
	let tag = {
		props: ['info'],
	}
	new Vue({
		data: {msg: 12345}
		components: {
			tag,
		}
	})
	
	子传父：自定义事件
	<tag @action="fn"></tag>
	
	let tag = {
		data: {msg: 12345},
		methods: {
			tag_fn() {
				this.$emit('action', this.msg)
			}
		}
	}
	new Vue({
		components: {
			tag,
		},
		methods: {
			fn(info) {}
		}
	})