vue3中父组件与子组件的通信传值

组件与子组件的通信传值"/>

vue3中父组件与子组件的通信传值

父组件传值到子组件

所有的 props 都遵循着单向绑定原则，props 因父组件的更新而变化，自然地将新的状态向下流往子组件，而不会逆向传递。这避免了子组件意外修改父组件的状态的情况，不然应用的数据流将很容易变得混乱而难以理解，
另外，每次父组件更新后，所有的子组件中的 props 都会被更新到最新值，这意味着你不应该在子组件中去更改一个 prop。若你这么做了，Vue 会在控制台上向你抛出警告:

 父组件

<template><div><!-- <ChildModule mytitle="我是标题" aa="张三" bb="李四" v-bind="{ name: '王五', age: 19 }" ></ChildModule> --><!--也可以直接v-bind一个对象--><ChildModule mytitle="我是标题" aa="张三" bb="李四" v-bind="myuser"></ChildModule></div>
</template>
<script>
import ChildModule from "./components/ChildModule.vue" //导入ChildModule组件模板
export default {data() {return {myuser: {name: "钱七",age: 19}}},components: {ChildModule: ChildModule //注册局部子组件ChildModule：也可以写成ChildModule:ChildModule},methods: {}
}
</script>

子组件：用props 数组来接收参数

<template><div>{{ mytitle }}-- {{ aa }}-- {{ bb }}-- {{ name }}-- {{ age }}</div>
</template>
<script>
export default {// 用props 数组来接收props: ["mytitle", "aa", "bb", "name", "age"]
}
</script>

子组件：用props对象来接收参数

<template><div>{{ mytitle }}-- {{ aa }}-- {{ bb }}-- {{ name }}-- {{ age }}--{{ isShow ? "是" : "否" }}</div>
</template>
<script>
export default {// 用props 数组来接收// props: ["mytitle", "aa", "bb", "name", "age", "isShow"]props: {mytitle: String,aa: [String, Number], //表示此参数可以接收String和Number类型bb: { //还可以自定义校验参数required: true, //true 表示属性必传；false 表示可以不传属性；type: String, //表示属性只能是String类型的。也可以指定多个类型如type:[String,Number]default() {// 如果该参数没用值则指定一个默认值abc ；也可以直接default: "abc" return "abc"},//也可以写成：validator:value=>['success','warning','danger','error'].indexOf(value)>-1validator(val) {//检查参数的值是否是"success"或者"warning"或者"danger"或者"error"，如果是则返回true,不是则返回false               return ["success", "warning", "danger", "error"].includes(val)}},name: String,age: Number,isShow: Boolean}
}
</script>

下面列举了所有可能的数据类型 

export default {props: {propA : String,  //字符串类型propB : Number,  //数字类型propC : Boolean, //布尔值类型propD : Array,  //数组类型propE : Object, //对象类型propF : Date,  //日期类型propG: Function, //函数类型propH: Symbol, //符号类型}
}