props
验证的类型可以是:
String,Number,Boolean,Object,Array,Function
props: {
props1: Number, //必须是数值类型
props2: [String, Number], // 数字类型 || 字符串
props3: {
type: Number, // 数值型 true为必传
required: true
},
props4: {
type: Boolean, // 布尔值 default默认为true
default: true
},
props5: {
type: Array, // 如果是数组 || 对象 默认值必须是一个函数返回
default: function{
return [];
}
}
}
父组件如下:
<template>
<div>
<input type="text" v-model="msg"> <!-- v-model双向绑定 -->
<son :datas=msg></son> <!-- 子组件通过datas接收msg数据 -->
</div>
</template>
<script>
import son from '引入子组件';
export default {
component: { son }, // 注册组件
data() {
return {
msg: '我是父组件数据'
}
}
}
</script>
子组件如下:
<template>
<div>
{{datas}}
<!--这里就可以传过来的显示数据了-->
</div>
</template>
<script>
export default {
props: {
datas: { // 这里的datas用于接收
type: String, // 我们接收验证的是字符串 也可以验证别的类型
}
}
}
</script>
$emit方法
父组件
<template>
<div>
<child show-txt="show"></child>
<div v-if="name">name: {{ name }}</div>
<div v-if="age">age: {{ age }}</div>
</div>
</template>
<script>
import { Child } from "Child";
export default {
data() {
return {
name: "",
age: ""
};
},
methods: {
show(data) {
this.name = data.name;
this.age = data.age;
}
}
};
</script>
子组件
<template>
<button @click="on_click">btn</button>
</template>
<script>
export default {
methods: {
on_click() {
this.$emit("show-txt", { name: "Rabbit", age: 18 });
}
}
};
</script>