Vue组件化开发_vue使用cmp组件-CSDN博客

本文链接：https://blog.csdn.net/qq_36381640/article/details/103482786
代码:
<html>
<head>
	<script type="text/javascript" src="../js/vue.js"></script>
	<title>vue的组件化开发</title>
</head>
<body>
	<template id="cpn">
	  <div>
	    <h2>组件模板抽离</h2>
	    <h3>抽离出来</h3>
	  </div>
	</template>
	<!-- v-model使用案例 -->
	<div id="app1" style="width: 50%">
		<div>
			<h5 >使用步骤：</h5>
			<ul>
				<li>1.创建组件构造器</li> Vue.extend()
				<li>2.注册组件 </li>Vue.comontent()
				<li>3.使用组件</li> 放在作用范围内使用
			</ul>
			<h5 >分类：</h5>
			<ul>
				<li>1.全局组件
					<ul>
						<li>1.多个vue实例都可以使用</li>  
						<li>2.注册方式：  Vue.component('my-tmp', myTmp) </li> 
					</ul>
				</li>  
				<li>2.局部组件
					<ul>
						<li>1.注册在那个实例就只能在那个实例中使用</li>  
						<li>2.注册方式： 直接写vue 的实例中components:{ cmp:cmp } </li> 
				</ul>
			</li> 
		</ul>
	</div>
	<my-tmp></my-tmp>
	<!-- <cmp>app1</cmp> -->使用会报错
</div>
<div id="app2" style="width: 50%">
	<cmp>app2</cmp>
	<cnp3></cnp3>
	<cnp-four></cnp-four>
	<cnp_five></cnp_five>
	<six></six>
</div>
<script type="text/javascript">
		// 1.创建组件构造器
		const myTmp=Vue.extend({
			template:`
			<div>
			<font >组件化开发：</font><br>
			<label   >
			<input type="checkbox"   > 
			</label> 
			</div>
			` 
		})
	    // 2.注册组件 
	    Vue.component('my-tmp', myTmp)  //组件标签名，这里的标签名不能使用大写字母，不然回报没有这个标签的错误
	    const app1=new Vue({
	    	el:"#app1",
	    	data:{
	    		numbers:[],
	    		numbers1:['one','two',"three","four","six","seven","eight","nine","ten"],
	    		sex:"男",
	    		checkboxs:[],
	    		age:0,
	    		trim:"",
	    		selects:['one'],
	    	},
	    	components:{

	    	}
	    })
	    const cmp=Vue.extend({
	    	template:`
	    	<div>
	    	<h5 >世界你好</h5> 
	    	</div>
	    	` 
	    })
	    // 父组件和子组件
	    const cnpOne=Vue.extend({
	    	template:`<h1>parent</h1>`
	    })
	    const cnpTwo=Vue.extend({
	    	template:`<div><cnp1></cnp1><h2>son1</h2></div>`, 		//父子组件引用的时候必须，外边裹一层div,不然报错
	    	components:{
	    		cnp1:cnpOne 
	    	}
	    })
	    const cnpThree=Vue.extend({
	    	template:`<div><cnp2></cnp2><h3>son2</h3></div>`,		//父子组件引用的时候必须，外边裹一层div,不然报错
	    	components:{
	    		cnp2:cnpTwo 
	    	}
	    })
	    // 组件的语法糖方式注册 
	    //1.注册全局组件
	    Vue.component("cnp-four",{
	    	template:"<h1>语法糖方式注册全局组件</h1>"
	    })
	    //1.组件模板抽离测试
	    Vue.component('six', {
		    template: '#cpn'
		  })
	    const app2=new Vue({
	    	el:"#app2",
	    	data:{
	    		sex:"男",
	    	},
	    	components:{
	    		cmp:cmp,
	    		cnp3:cnpThree, 
	    		cnp_five:{					//2.注册局部组件//这里的标签名不能写中划线 - 
	    			template:"<h1>语法糖方式注册局部组件</h1>"
	    		}
	    	}
	    })
</script> 
</body>
</html>