南国老符
最后更新于：2020-12-17
浏览：5234
pages/index/index.vue父页面代码如下：
<template>
<view class="wrap">
<!-- 引用组件 -->
<navigation :bbb="bbb" :aaa="aaa" :ccc="ccc" :ddd="ddd"></navigation>
</view>
</template>
<script>
import navigation from '../../components/navigation.vue';
export default {
data() {
return {
// 字符串
aaa:'classname',
// 布尔型
bbb:true,
// 数值
ccc:1,
// 对象类型
ddd:{abc:666,www:777}
}
},
onLoad(p){},
components:{
navigation
}
}components/navigation.vue组件示例代码如下：
<template name="navigation">
<view>
<view v-if="bbb" :class="aaa">
{{ccc}}
{{ddd.abc}}
</view>
</view>
</template>
<script>
export default {
name:'navigation',
data() {
return {}
},
created(p){},
// 父页面传递的属性参数
props:{
// 字符串
aaa:{
type:String
},
// 布尔型
bbb:{
type:Boolean
},
// 数值
ccc:{
type:Number
},
// 对象类型
ddd:{
type:Object
},
},
methods:{}
}
</script>下面是摘自网络的代码，供参考：
Vue.component('myComponent', {
props: {
// 基础类型检测 (`null` 意思是任何类型都可以)
propA: Number,
// 多种类型
propB: [String, Number],
// 必传且是字符串
propC: {
type: String,
required: true
},
// 数字，有默认值
propD: {
type: Number,
default: 100
},
// 数组/对象的默认值应当由一个工厂函数返回
propE: {
type: Object,
default: function () {
return { message: 'hello' }
}
},
// 自定义验证函数
propF: {
validator: function (value) {
return value > 10
}
}
}
});
type 可以是下面原生构造器：
String
Number
Boolean
Function
Object
Array
Symbol
type 也可以是一个自定义构造器函数，使用 instanceof 检测。
// 自定义Person构造器
function Person(name, age) {
this.name = name
this.age = age
}
Vue.component('my-component', {
template: `<div>名字: {{ person-prop.name }}， 年龄： {{ person-prop.age }} </div>`,
props: {
person-prop: {
type: Person // 指定类型
}
}
});
new Vue({
el: '#app2',
data: {
person: 2 // 传入Number类型会报错
}
});
上一篇： 闲聊IT互联网创业项目趋势
下一篇： uniapp微信小程序真机调试时，提示fail to connect to wxagame.weixin.qq.com错误