第十讲、Vue3.x父组件给子组件传值、Props、Props验证、单向数据流

我们可以为组件的 prop 指定验证要求，例如你知道的这些类型。如果有一个需求没有被满足，则 Vue 会在浏览器控制台中警告你。这在开发一个会被别人用到的组件时尤其有帮助。

props验证：

所有的 prop 都使得其父子 prop 之间形成了一个 单向下行绑定 ：父级 prop 的更新会向下流动到子组件中，但是反过来则不行。这样会防止从子组件意外变更父级组件的状态，从而导致你的应用的数据流向难以理解。

另外，每次父级组件发生变更时，子组件中所有的 prop 都将会刷新为最新的值。这意味着你 不 应该在一个子组件内部改变 prop。如果你这样做了，Vue 会在浏览器的控制台中发出警告。

子组件展示父组件传来的参数，展示的信息随着父组件上tab的切换动态更新。

一开始的想法是单独监听这个传递的参数，但看了VUE3的文档之后，似乎对参数的监听必须精确到属性。例如参数为

需要在子组件的 watch 中写明监听的是 name 还是 gender 。

该参数中有很多可能会改变的属性，一一监听过于麻烦。所以改变思路，使用监听props来获取所有所有传参。

在父组件中，用于传递给子组件的参数必须为响应式( eg reactive )，否则子组件在监听时不会监测到变换，watch永远不会生效

immediate 是立即开始监听，在页面首次渲染时可能为显示为undefined，如果watch的变化需要手动触发，不需要开启

deep 默认开启，可以忽略（参数为reactive，会默认开启deep，如果是ref，则不会默认开启deep）

vue在实际项目开发中,数据需要从上层传递到下层:

1、比如在一个页面中,我们从服务器请求到了很多的数据。

2、其中一部分数据,并非是我们整个页面的大组件来展示的,而是需要下面的子组件进行展示。

3、这个时候,并不会让子组件再次发送一个网络请求 ,而是直接让大组件(父组件)将数据传递给小组件(子组件)。

父组件是通过props向子组件传递数据的

子组件是通过事件$emit向父组件发送信息的

props信息传递过程

①在组件上v-blind一个自定义属性，并将父组件的数据变量名字赋值给这个属性,(可以定义多个属性绑定数据)

<com v-blind:childrenname="name" v-blind:childrenage="age"> </com>

②在组件的上增加props属性，属性的名字就是组件上自定义的属性名

props：[‘childrenname’,'childrenage']

props支持自定义验证和自定义验证类型

①自定义验证函数，需要使用validator属性

props：{

children:{ validator:function(value){ rerurn }}

}

如果不符合验证要求会报错 ：Invalid prop: custom validator check failed for prop "cmessage"

found in

②自定义验证类型

在vue中父类在使用子类组件时，默认将绑定事件传给了子类组件的 根元素 。

例：

有这样一个组件：

使用该组件：

以上例子中，click、focus事件的作用范围是组件的根结点 <div> ，而通常，我们是想在 <button> 上绑定事件，所以要取消事件，然后再手动绑定到 <button> 上。

通过以上，props和$attrs的区别显而易见。

Vue3官方提供了 script setup  语法糖

只需在script标签中添加setup，组件只需引入不用注册，属性和方法也不用返回，也不用写setup函数，也不用写export default ，甚至是自定义指令也可以在我们的template中自动获得。如下：

因为没有了setup函数，那么props，emit，attrs怎么获取呢

setup script语法糖提供了新的API来供我们使用

defineProps  用来接收父组件传来的 props ;  defineEmits  用来声明触发的事件。

//父组件

<template>

  <my-son foo="" @change="childClick" />

</template>

<script lang="ts" setup>

import MySon from "/MySonvue";

let childClick = (e: any):void => {

  consolelog(e);  //

};

</script>

//子组件

<template>

  <span @click="sonClick">信息:{{ propsfoo }}</span>

</template>

<script lang="ts" setup>

import { defineEmits, defineProps} from "vue";

const emit = defineEmits(["change"]);    // 声明触发事件 change

const props = defineProps({ foo: String });  // 获取props

consolelog(props)

const sonClick = () =>{

    emit('change' , propsfoo)

}

</script>

总结

1、语法糖就是setup()简写

2、在语法糖中使用变量可以直接使用

3、组件不需要祖册

4、不能使用非vue3的模块，钩子函数

您是想问vue移动端怎么取角色值吗？您可以按照以下步骤进行：

1、定义一个角色变量，通常命名为role。

2、在vue组件中，通过props属性将角色值传递给组件。

3、使用computed属性定义一个角色计算属性，用于根据传递的角色值计算当前用户的角色。

4、根据计算属性的值，显示不同的内容或执行不同的 *** 作，来区分不同的用户角色。

前面讲过通过props子组件很容易就可以获取到父组件的数据，但是父组件怎么获取子组件的数据呢？通过查资料，发现可以通过自定义事件来实现父组件与子组件之间的通信。

首先，得创建一个子组件模板文件，子组件在父组件中用的时候，总得有个触发动作可以获取到子组件的数据吧，所以，加个按钮，触发个动作。如下所示：

Appvue

以上就是关于第十讲、Vue3.x父组件给子组件传值、Props、Props验证、单向数据流全部的内容，包括:第十讲、Vue3.x父组件给子组件传值、Props、Props验证、单向数据流、Vue3中使用setup监听props、vue父子组件之间props的数据通信等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！