接下来主要是记录学下vue的高级特性:请看导图:
今天先记录下高级特性之一:组件中使用自定义的v-model
可以看下如下父组件代码:
<template>
<div class="">
//下面实现的效果就是修改组件中input的值,父组件的数据实时更改
<p>{{ name }}</p>
//使用v-model来绑定数据
<ModelCom v-model="name" />
</div>
</template>
<script>
import ModelCom from "./components/baseCom/ModelCom.vue";
export default {
name: "App",
components: { ModelCom },
data() {
return {
name: "coco",
};
},
methods: {},
};
</script>
<style lang="scss" scoped></style>
子组件的代码如下:
<template>
<div class="">
<!--
需要注意的点就是:
1.input使用的:value,而不是v-model
2.下面的change名,要和下面的model中的event保持一致
3.text1属性要对应起来
-->
<input
type="text"
:value="text1"
@input="$emit('change', $event.target.value)" />
</div>
</template>
<script>
export default {
data() {
return {};
},
//用来告诉组件自己依赖的数据和调用的方法
model: {
prop: "text1",
event: "change",
},
//用来接收父组件传递的值的,接收的名字自己可以随意取
props: {
text1: String,
default: () => {
return "";
},
},
methods: {},
};
</script>
<style lang="scss" scoped></style>