Vue3.0中父组件与子组件的通信传值props与emit :VCA模式

组件与子组件的通信传值props与emit :VCA模式"/>

Vue3.0中父组件与子组件的通信传值props与emit :VCA模式

简介

什么是props

Props 是 Vue 组件之间通信的一种方式，通过 Props，父组件可以向子组件传递数据，即：父组件可以通过组件标签上的属性值把数据传递到子组件中。子组件可以根据自己的属性和方法去渲染展示数据或执行某些操作。由于 props 是单向数据流的，它是只能从父组件传递到子组件的，而子组件是无法更改 props 的值的，只能由父组件来修改。这样就保证了组件的数据传递不会出现混乱和错乱的情况。

如何定义props

在 Vue 组件中，需要通过配置 props 属性来定义组件的 props。在组件中添加 props 属性之后，就可以使用 props 选项接收从父组件传递的数据。

使用字符串数组方式定义props

Props可以是数组形式进行滴定仪，在这里Props定义了一个数组，其中每个元素都是一个字符串类型的Prop名，表示父组件可以向子组件传递的数据项
 

案列

Child.vue子组件

<template><div><button>返回</button>{{ computedTitle }}<button @click="handelClick">首页</button></div>
</template>
<script>
import { computed } from 'vue';export default {//注意：用来接收的props是必不可少的。// props：这个还是和 Vue2 使用的组件之间通信的 props一样。props: ["mytitle", "aa"],//vca中的setup钩子函数接收两个参数：props和context//setup(props):所接收到的参数其实是来自上面props数组中的对象，而不是直接从父组件中传递过来的// context：定义上下文，这个参数身上有一些我们比较常用的属性，比如// context.emit：等同于 Vue2 的 this.$emit。// context.slots：等同于 Vue2 的 this.$slots。// context.attrs：等同于 Vue2 的 this.$attrs。// context.expose()：当前组件对外暴露属性的函数//参数直接可以写成解构的形式:setup({mytitle,aa},{emit,slots,attrs,expose}){   ......    }setup(sProps, sContext) {console.log(sProps);const computedTitle = computed(() => {return `这是在子组件中重新包装后的标题:${sProps.mytitle}`})const email = "abc@qq"const handelClick = () => {sContext.emit("myevent", "李四", email) //VCA中的emit用法:调用父组件的myevent监听事件，执行监听事件中绑定的函数}return {computedTitle,handelClick,}}
}
</script>

app.vue父组件

<template><div><Child :mytitle="mytitle" aa="返回" @myevent="myHandelClick"></Child><div>{{ name }}---{{ email }}</div></div>
</template>
<script>
import { ref } from 'vue';
import 'bootstrap/dist/css/bootstrap.css'
import Child from "./components/Child.vue" //导入Child组件模板
export default {components: {Child: Child //注册Child子组件},setup() {const mytitle = ref("我是标题");const name = ref("");const email = ref("");//email.value=1; ////myevent监听事件的绑定函数const myHandelClick = (myname, myemail) => {name.value = myname;  //name经过ref包装后是一个对象，name.value = false;是改变对象的属性的值。name变量本身的值没有改变，还是这个对象。email.value = myemail //email经过ref包装后是一个对象，email.value = false;是改变对象的属性的值。email变量本身的值没有改变，还是这个对象。}return {mytitle,name,email,myHandelClick}}
}
</script>