VUE组件化详解

vue组件化相关知识点:

组件的使用大致分为: 创建组件构造器->注册组件->在html中使用组件

1.构造组件

①: 普通方式构建

//--js代码中编写
	// 1.创建组件构造器- 在template中写html模板代码
	const conc = Vue.extend({
			template: `
				<div>
					<h2>我是标题</h2>
					<p>我是内容</p>
				</div>
			`
	})
	//2.注册组件  (全局组件, 可以在任何的VUE实例下使用)
	//传递一个 需要定义的组件名称,一个是组件构造器对象
	Vue.component('my_cpn',conc)
	

3.使用组件: 在需要在VUE的实例对象中, 使用<my_cpn></my_cpn> 即可使用该组件

②: 语法糖的写法

<template id="cpn">
	<div>
		<a href="">aaaaa</a>
	</div>
</template>

//去掉了 .extend方法 
	Vue.component('my_cpn',{
		template: "#cpn"

	})

## 全局组件和局部组件:
1.全局组件: 可以在多个vue实例对象中使用;

2.局部组件: 只能在该vue实例对象里使用

插槽

1. 常规使用slot; 共性问题组合为组件,不同的放插槽
   在组件中内部使用
   
2. 插槽中间可以设置默认值: 在 按钮 这样写会默认显示ann,重新赋值时才会更改
3. 如果有多个值,同时放入组件中替换,会一起作为替换元素

具名插槽
可以通过name属性给插槽增加名称; 在使用时通过 slot= ""name"来定位到该插槽

编辑作用域
当组件和vue实例中含有名称相同的变量时 ;会使用实例对象中的 变量

所属模板属于所属的作用域;
作用域插槽:
父组件替换插槽的标签 (组件位于vue实例中) ,但内容由子组件来提供