文章目录
1 组件上使用 v-model
v-model 是双向数据绑定指令,当需要维护组件内外数据的同步时,可以在组件上使用 v-model 指令。
外界数据的变化会自动同步到 counter 组件中
counter 组件中数据的变化,也会自动同步到外界
2 在组件上使用 v-model 的步骤
① 父组件通过 v-bind: 属性绑定的形式,把数据传递给子组件
② 子组件中,通过 props 接收父组件传递过来的数据
① 在 v-bind: 指令之前添加 v-model 指令
② 在子组件中声明 emits 自定义事件,格式为 update:xxx
③ 调用 $emit() 触发自定义事件,更新父组件中的数据
2.1 父组件通过 v-bind: 属性绑定的形式,把数据传递给子组件
<template>
<div>
<h1>App 组件</h1>
<p>App-count: {
{count}}</p>
<counter :count="count"></counter>
</div>
</template>
<script>
import Counter from './Counter.vue'
export default {
name: 'App',
data() {
return {
count: 0
}
},
components: {
Counter
}
}
</script>
<style>
</style>
2.2 子组件中,通过 props 接收父组件传递过来的数据
<template>
<div>
<h3>Counter 组件</h3>
<p>{
{count}}</p>
</div>
</template>
<script>
export default {
name: 'Counter',
props: ['count']
}
</script>
<style>
</style>
2.3 在 v-bind: 指令之前添加 v-model 指令
监听子组件的数据的变化。
<template>
<div>
<h1>App 组件</h1>
<p>App-count: {
{count}}</p>
<counter v-model:count="count"></counter>
</div>
</template>
<script>
import Counter from './Counter.vue'
export default {
name: 'App',
data() {
return {
count: 0
}
},
components: {
Counter
}
}
</script>
<style>
</style>
2.4 在子组件中声明 emits 自定义事件,格式为 update:xxx
利用 emits 向父组件传值。
扫描二维码关注公众号,回复:
14026293 查看本文章
<template>
<div>
<h3>Counter 组件</h3>
<p>{
{count}}</p>
<button @click="sub"> -1 </button>
</div>
</template>
<script>
export default {
name: 'Counter',
props: ['count'],
emits: ['update:count']
}
}
</script>
<style>
</style>
2.5 调用 $emit() 触发自定义事件,更新父组件中的数据
<template>
<div>
<h3>Counter 组件</h3>
<p>{
{count}}</p>
<button @click="sub"> -1 </button>
</div>
</template>
<script>
export default {
name: 'Counter',
props: ['count'],
emits: ['update:count'],
methods: {
sub() {
this.$emit( 'update:count', this.count-1 )
}
}
}
</script>
<style>
</style>
2.6 完整代码
Counter.vue
<template>
<div>
<h3>Counter 组件</h3>
<p>{
{count}}</p>
<button @click="sub"> -1 </button>
</div>
</template>
<script>
export default {
name: 'Counter',
props: ['count'],
emits: ['update:count'],
methods: {
sub() {
this.$emit( 'update:count', this.count-1 )
}
}
}
</script>
<style>
</style>
App.vue
<template>
<div>
<h1>App 组件</h1>
<p>App-count: {
{count}}</p>
<button @click="add"> +1 </button>
<counter v-model:count="count"></counter>
</div>
</template>
<script>
import Counter from './Counter.vue'
export default {
name: 'App',
data() {
return {
count: 0
}
},
methods: {
add() {
this.count++
}
},
components: {
Counter
}
}
</script>
<style>
</style>