标签：Box Vue MyBox Nav1 template 按钮 组件

组件

　　组件是可复用的 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>

标签：Box,Vue,MyBox,Nav1,template,按钮,组件
来源： https://www.cnblogs.com/forever-ljf/p/16660137.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。