退出系统
2.0 版本 weex 版本

graceUI - weex 教程 - 自定义组件

自定义组件概述

将常用的功能或者布局封装为自定义组件是非常不错的开发习惯,下面我们相信讲解自定义组件的封装与调用;

创建组件

1 在项目下创建 components 文件夹
2 在文件夹下创建组件,如 : test.nuve (普通vue 原理一样)
3 编写以下代码
<template>
	<div>
		<text class="text">{{msg}}</text>
	</div>
</template>
<script>
export default {
	props: {
		msg : {
			type : String,
			default : ''
		}
	}
}
</script>
<style>
.text{font-size:50px; line-height:80px; background-color: #007AFF;}
</style>

调用组件

<template>
	<div>
		<test msg="hi...."></test>
	</div>
</template>
<script>
import test from '@/components/test.nvue'
export default {
	data() {
		return {
			
		}
	},
	methods: {
	},
	components: {
		test
	}
}
</script>
<style>
</style>

组件事件及传参

<template>
	<div>
		<text class="text" @click="clickText">{{msg}}</text>
	</div>
</template>
<script>
export default {
	props: {
		msg : {
			type : String,
			default : ''
		}
	},
	methods: {
		clickText() {
			console.log('click');
			this.$emit('clickme', this.msg);
		}
	},
}
</script>
<style>
.text{font-size:50px; line-height:80px; background-color: #007AFF;}
</style>

// 调用
<template>
	<div>
		<test msg="hi...." @clickme="clickme"></test>
	</div>
</template>
<script>
import test from '@/components/test.nvue'
export default {
	data() {
		return {
			
		}
	},
	methods: {
		clickme :function(e){
			console.log(e);
		}
	},
	components: {
		test
	}
}
</script>
<style>
</style>


使用 watch 观察组件属性变化

<template>
	<div>
		<text class="text" @click="clickText">{{msg}}</text>
	</div>
</template>
<script>
export default {
	props: {
		msg : {
			type : String,
			default : ''
		}
	},
	methods: {
		clickText() {
			console.log('click');
			this.$emit('clickme', this.msg);
		}
	},
	watch:{
		msg : function(var1, var2){
			console.log(var1, var2);
		}
	}
}
</script>
<style>
.text{font-size:50px; line-height:80px; background-color: #007AFF;}
</style>

<template>
	<div>
		<test :msg="msg" @clickme="clickme"></test>
	</div>
</template>
<script>
import test from '@/components/test.nvue'
export default {
	data() {
		return {
			msg:"hi......"
		}
	},
	created: function(){
		setTimeout(function(){
			this.msg = "hi.... change......"
		}.bind(this), 2000);
	},
	methods: {
		clickme :function(e){
			console.log(e);
		}
	},
	components: {
		test
	}
}
</script>
<style>
</style>