父组件
<template>
<div class="home">
<p>{{name}}</p>
<v-model v-model="name"></v-model>
</div>
</template>
<script>
import vModel from '@/components/HelloWorld'
export default {
name: 'home',
components: {
vModel,
},
data() {
return {
name: '张三',
}
},
methods: {
},
}
</script>
子组件
<template>
<input type="text" :value="text" @input="$emit('change',$event.target.value)" />
</template>
<script>
/**
* input使用了:value而不是v-model
* change和 model change要对应
* text属性对应
*/
export default {
model: {
prop: 'text',
event: 'change',
},
props: {
text: String,
default() {
return ''
},
},
}
</script>
<style scoped lang="stylus"></style>