前言
在我使用uniapp中，免不了要去自定义一个组件，于是根据官方文档尝试定义了一个组件。
组件定义
新建一个 vue 文件，根据以下格式定义组件
<template name="组件名称">
<view>
......
</view>
</template>
<script>
export default {
name: "组件名称",
//属性
props: {
属性名称: {
type: String,//属性类型
value: "值"
},
......
},
//组件生命周期
created:function(e){
},
methods: {
函数名称:function(obj){
},
}
}
</script>
<style>
组件样式
</style>
组件使用
1、引用组件
import 组件名称 from "../../components/组件名.vue";
2、注册组件
export default{
components:{
组件名称
},
}
3、在试图模板中使用组件
<组件名称 组件属性="对应的值"></组件名称>
我定义的测试组件
新建一个 vue 文件，命名为 test-page.vue
<template name="testPage">
<view @click="onClick('eee')">
<text :text="text" :class="{backgroundColor}">{{text}}</text>
<!-- <view v-for="item in date" :key="index" :dataText="{text}">2</view> -->
</view>
</template>
<script>
export default {
name: 'testPage',
props: {
text: {
type: String,
default: ''
},
test: {
type: String,
default: ''
},
date: {
type: Array,
default () {
return []
}
},
backgroundColor: {
type: String,
default: '#fffbe8'
}
},
data() {
return {
dataText: 'ddddd'
}
},
methods: {
onClick(e) {
console.log(e);
this.$emit('clickedA', e + "ddd")
}
}
}
</script>
<style>
</style>
我定义的组件使用
<test-page :date="date" :text="noticeText" :test="mode"
:backgroundColor="noticeText"
@clickedA="onClick"></test-page>
组件注意事项
组件直接参数传递方式和 vue 方法一样：
父组件 ---> 子组件传递通过 props;
子组件---->父组件传值通过$emit 事件传递
我的疑问
父组件向子组件传递参数后，我想在子组件的属性中绑定 text 值，一直绑定不起。
但是用特殊的关键字又可以如： :id :style 等。由于对 vue 还不是太熟，记录下这个问题。
