在vue写自定义组件时,很多时候会涉及到子组件修改父组件的值,一般我们都会想到v-bind和v-on来实现,下面就是本文要讲的v-bind和v-on的语法糖v-model和sync:
.sync修饰符
sync是vue的一个语法糖,主要是为了实现在子组件改变父组件的变量,具体写法如下:
父组件
<template>
<div class="parent">
parent组件--{{toAbout}}
<!--update:about为固定写法,about即为v-bind绑定的变量-->
<!--<About :about="toAbout" @update:about="val => toAbout = val"></About>-->
<!--这个为上面代码的简写即语法糖-->
<About :about.sync="toAbout"></About>
</div>
</template>
<script>
import About from './About.vue'
export default {
components: {
About
},
data() {
return {
toAbout: false
}
}
}
</script>
子组件
<template>
<div class="home">
vue+js项目
<hr>
{{about + ''}}
<button @click="change">change</button>
</div>
</template>
<script>
export default {
props: ['about'],
methods: {
change() {
// 调用父组件的update:about方法,将变量放在第二个参数,即可改变父组件的变量
this.$emit('update:about', !this.about)
}
}
}
</script>
自定义组件的v-model
v-model也是vue的一个语法糖,主要是为了实现在父组件和子组件的变量双向绑定,即同时改变,具体写法如下:
父组件
<template>
<div class="parent">
parent组件--{{toAbout}}
<br>
<input type="text" v-model="toAbout">
<hr>
<!--value 和 input 为默认写法,如果要修改为其他需要在子组件中使用model进行配置-->
<!-- <About :value="toAbout" @input="val => toAbout = val"></About> -->
<!--这个为上面代码的简写即语法糖-->
<About v-model="toAbout"></About>
</div>
</template>
<script>
import About from './About.vue'
export default {
components: {
About
},
data() {
return {
toAbout: 'default'
}
}
}
</script>
子组件
<template>
<div class="home">
vue+js项目
<hr>
{{value + ''}}
<input type="text" v-model="childAbout">
</div>
</template>
<script>
export default {
// 使用value进行接收
props: ['value'],
data() {
return {
}
},
computed: {
childAbout: {
get() {
return this.value
},
set(val) {
// 调用父组件的input方法,将变量放在第二个参数,即可改变父组件的变量
this.$emit('input', val)
}
}
}
}
</script>
自定义组件v-model中自定义接收变量和方法
v-model默认的是使用value传递参数,使用input绑定方法,有时候我们并不想使用默认的而是想自己定义那么就使用到了model
父组件
<template>
<div class="parent">
parent组件--{{toAbout}}
<br>
<input type="text" v-model="toAbout">
<hr>
<!-- 我们自定义使用 custom传递变量 使用customFunc绑定方法 -->
<!-- <About :custom="toAbout" @customFunc="val => toAbout = val"></About> -->
<!--这个为上面代码的简写即语法糖-->
<About v-model="toAbout"></About>
</div>
</template>
<script>
import About from './About.vue'
export default {
components: {
About
},
data() {
return {
toAbout: 'default'
}
}
}
</script>
子组件
<template>
<div class="home">
vue+js项目
<hr>
{{custom + ''}}
<input type="text" v-model="childAbout">
</div>
</template>
<script>
export default {
// 重点即为model prop指向v-bind绑定的值(即prop使用什么接收),event指向v-on绑定的值(即$emit调用哪个方法返回)
// 注意是 prop 而不是 props
model: {
prop: 'custom',
event: 'customFunc'
},
// 使用custom进行接收
props: ['custom'],
data() {
return {
}
},
computed: {
childAbout: {
get() {
return this.custom
},
set(val) {
// 调用父组件的customFunc方法,将变量放在第二个参数,即可改变父组件的变量
this.$emit('customFunc', val)
}
}
}
}
</script>