Vue-组件

组件

　　组件是可复用的 Vue 实例,主要用于开发中 具有相同特征不同数据的模块 把它集成为一个组件 供重复利用

1.全局组件:

　　组件的属性不能用大写字母 组件的名字可以用驼峰命名法,但是使用的时候必须用连字符 全局注册的组件使用时不能使用单标签(不会报错,但是只能使用一次 多次使用只显示第一个)

　　注册的组件不要跟系统标签同名

2.局部组件

　　 一个vm实例可以有多个局部组件,但是只能供当前vm实例使用

组件引用的三种方式

new Vue({
				el: '#app',
				data: {},
				methods: {},
				components:{
					Box:{
						template:`<div>
					              <h1>6666</h1>
						           <p>hello</p>
					               </div>`
					},
					Nav1:{
						template:`<div>
						          <div>按钮1</div>
						          <div>按钮2</div>								  
								  <div>按钮3</div>
								  <div>按钮4</div>
						           </div>`
					},
					MyBox:{
						template:`<h1>666</h1>`
					}	
				},
								
				filters:{},
				watch:{},
				computed:{},
				directives:{},				
				beforeCreate(){},
				created(){},
				beforeMount(){},
				mounted(){},
				beforeUpdate(){},
				updated(){},
				beforeDestroy(){},
				destroyed(){}
			})

　　

<script>
			let a1 = {
				template: `<div>
					              <h1>6666</h1>
						           <p>hello</p>
					               </div>`
			}
			let a2 = {
				template: `<div>
						          <div>按钮1</div>
						          <div>按钮2</div>								  
								  <div>按钮3</div>
								  <div>按钮4</div>
						           </div>`
			}
			let a3 = {
				template: `<h1>666</h1>`
			}
			var vm = new Vue({
				el: '#app',
				data: {},
				methods: {},
				components: {
					//注册组件
					Box: a1,
					Nav1: a2,
					MyBox: a3
				},

				filters: {},
				watch: {},
				computed: {},
				directives: {},
				beforeCreate() {},
				created() {},
				beforeMount() {},
				mounted() {},
				beforeUpdate() {},
				updated() {},
				beforeDestroy() {},
				destroyed() {}
			})
		</script>

 

<script type="module">		
		   //1.导入
			import Box from "./componnets/Box.js"
			import Nav1 from "./componnets/Nav1.js"
			import MyBox from "./componnets/MyBox.js"
			var vm = new Vue({
				el: '#app',
				data: {},
				methods: {},
				components: {
					//2.注册组件
					Box,
					Nav1,
					MyBox,
					Box2:{
						template:`<div>
						       <h1>666-box2</h1>
							   <p @click="fn">{{msg}}</p>
						 </div>`,
						data:function(){
							return {msg:"msg66666"}
						},
						methods:{
							fn(){console.log("Box2组件的方法")}
						},
						filters: {},
						watch: {},
						computed: {},
						directives: {},
						beforeCreate() {},
						created() {},
						beforeMount() {},
						mounted() {},
						beforeUpdate() {},
						updated() {},
						beforeDestroy() {},
						destroyed() {}
					}
				},
				filters: {},
				watch: {},
				computed: {},
				directives: {},
				beforeCreate() {},
				created() {},
				beforeMount() {},
				mounted() {},
				beforeUpdate() {},
				updated() {},
				beforeDestroy() {},
				destroyed() {}
			})
		</script>