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.com"

        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>