Vue 组件 1

最新推荐文章于 2022-08-11 21:50:22 发布

黄宝～

最新推荐文章于 2022-08-11 21:50:22 发布

阅读量79

点赞数

分类专栏： vue

本文链接：https://blog.csdn.net/forebe/article/details/117521200

版权

vue 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

什么是组件

组件是独立的、代表了页面的一部分代码。

为什么使用组件

提高扩展性、复用代码好维护，减少代码量。减少工作量

进一步

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="app">

			<!-- 使用自定义组件 -->
			<my-button name="黄老板" age="18"></my-button>
			
			<!-- 有一个警告， price是字符串，需要的是number -->
			<price-display price="10" style="background:red;"></price-display>
			
			<price-display :price="price" unit="abcd"></price-display>
		
		 <!-- 有一个警告， price是字符串，需要的是number -->
		 <price-display price="10" style="background:red;"></price-display>
		 
		<!-- 使用插槽 <slot></slot> -->
		<my-button2 >我是黄总x</my-button2>
		
		<!-- 具名插槽 <slot name='abc'></slot> -->
		<my-button3 >
			<h1 slot="a1">我是h1</h1>
			<h2 slot="a2">我是h2</h2>
		</my-button3>
		
		
		<my-button4 v-on:count="handleCount"></my-button4>
		
		</div>
		
		<div id="app2" style="margin-top: 20px;border-top:1px solid aqua">
			<div v-if="user"> {{user}}</div>
		</div>
		<script type="text/javascript">
			//全局注册组件
			//Vue.component('组件名称',{ template:'xx'})

			// 定义一个组件，这也太爽了，就是个一个对象
			let myButton = {
				template: '<button> {{ name }} 年年{{age}}岁</button>',
				props:['name','age'],
				data() { //组件data是一个函数,这是因为同一个组件在一个页面可以引入多次。函数每一次都是一个新的对象
					return {
						message: '我是按钮'
					}
				},
				computed: {
					//计算属性
				}

			}
			//props验证
			Vue.component('price-display',{
				props:{
					price:{
						type:Number, //类型是 number
						required:true //必须，否则vue会给出一个警告
					},
					unit:{
						type:String,
						default:'$'//默认值$
						
					}
				},
				template:'<div> {{unit}} {{price}}</div>'
			});
			
			 //使用插槽 <slot></slot>
			 Vue.component('my-button2',{
				 template:'<button><slot>我是小黄</slot></button>'
			 });
			 
			  //具名插槽 <slot name='abc'></slot>
			  Vue.component('my-button3',{
				   template:"<div><slot name='a1'></slot> <slot name='a2'></slot></div>"
			  });
			  
			  //自定义事件
			  let myButton4 ={
				  template:'<div @click="handClick">我是黄老板！{{clicks}}次</div>',
				  data(){
					  return {clicks:0}
				  },
				  methods:{
					  handClick(){
						   this.clicks++;
						   //发送一个count 事件
						   this.$emit('count',this.clicks);
					  }
				  }
			  };
			
			let vm = new Vue({
				el: "#app",
				data: {
					message: 'hello world',
					price:10
				},
				components: {
					myButton,
					myButton4
				},
				methods:{
					handleCount(e){
						 console.log("handleCount",e);
					}
				}
			});
			
			//混入 类似"工具类"，混入后就是和那个组件融为一体了
			
			const userMixin ={
				 methods:{
					 getUserInfo(){
						 return {name:'黄老板',age:18,};
					 }
				 }
				 
	
			}
			
			let vm2 =new Vue({
				mixins:[userMixin],
				el:'#app2',
				data:{
					user:null
				},
				mounted() {
					this.user = this.getUserInfo();
				}
			});
			
			
		</script>


	</body>
</html>