持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第11天，点击查看活动详情
前言
大家好呀，我是L同学。在上篇文章vue3知识点总结（四）中，我们学习了vue3的知识点，包括watch函数、ref 属性、vue中废弃了过滤器等相关知识点。今天，在这篇文章中，我们将继续学习vue3的知识点，包括如何进行父子组件间通讯、v-model语法糖等等相关知识点。
父子通讯
在实际开发过程中，我们经常会遇到父子组件通讯的问题，父组件传递给子组件数据，子组件数据传递给父组件。在vue3中我们使用props选项和emits选项可以完成父子组件通讯。
- 父传子方式：在setup中使用props数据
setup(props){ // props就是父组件数据 } - 子传父方式：触发自定义事件的时候emit来自
setup(props,{emit}){ // emit 就是触发事件函数 }
在父组件中，把money数据传给子组件<Son :money="money" />。
<template>
<div class="container">
<h1>父组件</h1>
<p>{{money}}</p>
<hr>
<Son :money="money" />
</div>
</template>
<script>
import { ref } from 'vue'
import Son from './Son.vue'
export default {
name: 'App',
components: {
Son
},
setup () {
const money = ref(100)
return { money }
}
}
</script>
子组件接收父组件数据使用props就可以了，在setup中使用props数据，还可以对父组件传递过来的数据进行校验。
<template>
<div class="container">
<h1>子组件</h1>
<p>{{money}}</p>
</div>
</template>
<script>
import { onMounted } from 'vue'
export default {
name: 'Son',
props: {
money: {
type: Number,
default: 0
}
},
setup (props) {
// 获取父组件数据money
console.log(props.money)
}
}
</script>
子传父，子组件接收过来的money数据，如果想要修改的话，需要符合单向数据流的原则。通过子传父的方式，让父组件修改money。
父组件。
<template>
<div class="container">
<h1>父组件</h1>
<p>{{money}}</p>
<hr>
+ <Son :money="money" @change-money="updateMoney" />
</div>
</template>
<script>
import { ref } from 'vue'
import Son from './Son.vue'
export default {
name: 'App',
components: {
Son
},
// 父组件的数据传递给子组件
setup () {
const money = ref(100)
+ const updateMoney = (newMoney) => {
+ money.value = newMoney
+ }
+ return { money , updateMoney}
}
}
</script>
子组件。
<template>
<div class="container">
<h1>子组件</h1>
<p>{{money}}</p>
+ <button @click="changeMoney">花50元</button>
</div>
</template>
<script>
import { onMounted } from 'vue'
export default {
name: 'Son',
// 子组件接收父组件数据使用props即可
props: {
money: {
type: Number,
default: 0
}
},
// props 父组件数据
// emit 触发自定义事件的函数
+ setup (props, {emit}) {
// 获取父组件数据money
console.log(props.money)
// 向父组件传值
+ const changeMoney = () => {
// 消费50元
// 通知父组件，money需要变成50
+ emit('change-money', 50)
+ }
+ return {changeMoney}
}
}
</script>
在vue3.0中 v-model 和 .sync 已经合并成 v-model 指令。
在vue2.x的时候 .sync 除去v-model实现双向数据绑定的另一种方式。
<!-- <Son :money='money' @update:money="fn" /> -->
<Son :money.sync='money' />
在vue3.0的时候，使用 v-model:money="money" 即可。
<!-- <Son :money="money" @update:money="updateMoney" /> -->
<Son v-model:money="money" />
v-model语法糖
在vue2.0中v-mode语法糖简写的代码 <Son :value="msg" @input="msg=$event" />。在vue3.0中v-model语法糖有所调整：<Son :modelValue="msg" @update:modelValue="msg=$event" />。
vue3.0封装组件支持v-model的时候，父传子:modelValue 子传父 @update:modelValue。vue2.0的 xxx.sync 语法糖解析 父传子 :xxx 子传父 @update:xxx 在vue3.0 使用 v-model:xxx 代替。
<template>
<div class="container">
<!-- 如果你想获取原生事件事件对象 -->
<!-- 如果绑定事函数 fn fn(e){ // e 就是事件对象 } -->
<!-- 如果绑定的是js表达式 此时提供一个默认的变量 $event -->
<h1 @click="$event.target.style.color='red'">父组件 {{count}}</h1>
<hr>
<!-- 如果你想获取自定义事件 -->
<!-- 如果绑定事函数 fn fn(data){ // data 触发自定义事件的传参 } -->
<!-- 如果绑定的是js表达式 此时 $event代表触发自定义事件的传参 -->
<!-- <Son :modelValue="count" @update:modelValue="count=$event" /> -->
<Son v-model="count" />
</div>
</template>
<script>
import { ref } from 'vue'
import Son from './Son.vue'
export default {
name: 'App',
components: {
Son
},
setup () {
const count = ref(10)
return { count }
}
}
</script>
<template>
<div class="container">
<h2>子组件 {{modelValue}} <button @click="fn">改变数据</button></h2>
</div>
</template>
<script>
export default {
name: 'Son',
props: {
modelValue: {
type: Number,
default: 0
}
},
setup (props, {emit}) {
const fn = () => {
// 改变数据
emit('update:modelValue', 100)
}
return { fn }
}
}
</script>
