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


    父组件传值到子组件

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

     父组件

    1. <template>
    2. <div>
    3. <ChildModule mytitle="我是标题" aa="张三" bb="李四" v-bind="myuser">ChildModule>
    4. div>
    5. template>
    6. <script>
    7. import ChildModule from "./components/ChildModule.vue" //导入ChildModule组件模板
    8. export default {
    9. data() {
    10. return {
    11. myuser: {
    12. name: "钱七",
    13. age: 19
    14. }
    15. }
    16. },
    17. components: {
    18. ChildModule: ChildModule //注册局部子组件ChildModule:也可以写成ChildModule:ChildModule
    19. },
    20. methods: {
    21. }
    22. }
    23. script>

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

    1. <template>
    2. <div>
    3. {{ mytitle }}-- {{ aa }}-- {{ bb }}-- {{ name }}-- {{ age }}
    4. div>
    5. template>
    6. <script>
    7. export default {
    8. // 用props 数组来接收
    9. props: ["mytitle", "aa", "bb", "name", "age"]
    10. }
    11. script>

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

    1. <template>
    2. <div>
    3. {{ mytitle }}-- {{ aa }}-- {{ bb }}-- {{ name }}-- {{ age }}--{{ isShow ? "是" : "否" }}
    4. div>
    5. template>
    6. <script>
    7. export default {
    8. // 用props 数组来接收
    9. // props: ["mytitle", "aa", "bb", "name", "age", "isShow"]
    10. props: {
    11. mytitle: String,
    12. aa: [String, Number], //表示此参数可以接收String和Number类型
    13. bb: { //还可以自定义校验参数
    14. required: true, //true 表示属性必传;false 表示可以不传属性;
    15. type: String, //表示属性只能是String类型的。也可以指定多个类型如type:[String,Number]
    16. default() {// 如果该参数没用值则指定一个默认值abc ;也可以直接default: "abc"
    17. return "abc"
    18. },
    19. //也可以写成:validator:value=>['success','warning','danger','error'].indexOf(value)>-1
    20. validator(val) {
    21. //检查参数的值是否是"success"或者"warning"或者"danger"或者"error",如果是则返回true,不是则返回false
    22. return ["success", "warning", "danger", "error"].includes(val)
    23. }
    24. },
    25. name: String,
    26. age: Number,
    27. isShow: Boolean
    28. }
    29. }
    30. script>

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

    1. export default {
    2. props: {
    3. propA : String, //字符串类型
    4. propB : Number, //数字类型
    5. propC : Boolean, //布尔值类型
    6. propD : Array, //数组类型
    7. propE : Object, //对象类型
    8. propF : Date, //日期类型
    9. propG: Function, //函数类型
    10. propH: Symbol, //符号类型
    11. }
    12. }

    子组件传值到父组件

    父组件

    1. <template>
    2. <div>
    3. <ChildModule v-on:event="handelClick" v-on:aaa="handelClick2">ChildModule>
    4. div>
    5. template>
    6. <script>
    7. import ChildModule from "./components/ChildModule.vue" //导入ChildModule组件模板
    8. export default {
    9. inheritAttrs:false,
    10. data() {
    11. return {
    12. }
    13. },
    14. components: {
    15. ChildModule: ChildModule //注册局部子组件ChildModule:也可以写成ChildModule:ChildModule
    16. },
    17. methods: {
    18. handelClick(user){
    19. console.log(user);
    20. console.log(user.name);
    21. console.log(user.age);
    22. },
    23. handelClick2(a,b){
    24. console.log(a);
    25. console.log(b);
    26. }
    27. }
    28. }
    29. script>

    子组件

    1. <template>
    2. <div>
    3. <button v-on:click="handelClick">点击button>
    4. <button v-on:click="$emit('event',user)">点击button>
    5. <button v-on:click="handelClick2">点击2button>
    6. div>
    7. template>
    8. <script>
    9. export default {
    10. data(){
    11. return{
    12. user:{
    13. name:"张三",
    14. age:19,
    15. emial:"abc@123.com"
    16. }
    17. }
    18. },
    19. methods:{
    20. handelClick(){
    21. //$emit的主要作用是子组件可以通过使用$emit,让父组件监听到自定义事件 ,以及传递的参数
    22. this.$emit("event",this.user)//调用父组件中的event监听事件,将值传递给父组件(支持传递多个参数,this.$emit("event",this.user,123,456))
    23. },
    24. handelClick2(){
    25. this.$emit("aaa",123,"hello")//调用父组件中的aaa监听事件,将值传递给父组件(支持传递多个参数,this.$emit("aaa",this.user,123,456))
    26. }
    27. }
    28. }
    29. script>

    父组件直接从子子组件中获取值$refs

    不建议使用会增加组件之间的耦合度,一般用于第三方插件的封装

    ref如果绑定在dom节点上,拿到的就是原生dom节点。
    ref如果绑定在组件上,拿到的就是组件对象,可以实现通信功能

    父组件

    1. <template>
    2. <div>
    3. <button v-on:click="handelClick">打印看看button>
    4. <ChildModule ref="mychild">ChildModule>
    5. <input type="text" ref="myinput">
    6. <div type="text" ref="mydiv">wowodiv>
    7. div>
    8. template>
    9. <script>
    10. import ChildModule from "./components/ChildModule.vue" //导入ChildModule组件模板
    11. export default {
    12. inheritAttrs: false,
    13. data() {
    14. return {
    15. }
    16. },
    17. components: {
    18. ChildModule: ChildModule //注册局部子组件ChildModule:也可以写成ChildModule:ChildModule
    19. },
    20. methods: {
    21. handelClick() {
    22. console.log(this.$.refs.myinput);
    23. console.log(this.$.refs.mydiv);
    24. console.log(this.$.refs.mychild);
    25. this.$.refs.myinput.value="abc";
    26. this.$.refs.mydiv.style.background='red'; //
    27. this.$refs.mychild.user.name="李四"; //直接获取子组件的user.name值并重新赋值
    28. }
    29. }
    30. }
    31. script>

    子组件

    1. <template>
    2. <div>
    3. {{user.name}}
    4. div>
    5. template>
    6. <script>
    7. export default {
    8. data(){
    9. return{
    10. user:{
    11. name:"张三",
    12. age:19,
    13. emial:"abc@123.com"
    14. }
    15. }
    16. },
    17. methods:{
    18. }
    19. }
    20. script>

  • 相关阅读:
    Allegro166背钻设置指导
    【云原生之Docker实战】使用Docker部署家庭个人在线音乐平台
    使用 TiUP 部署 TiDB 集群
    Google guava之ListMultimap简介说明
    【正点原子STM32连载】 第六十二章 UCOSII实验2-信号量和邮箱 摘自【正点原子】MiniPro STM32H750 开发指南_V1.1
    Linux之history命令详解
    工业级wifi路由器 功能 接口参数
    从零玩转人脸识别
    自动控制原理3.2---一阶系统的时域分析
    【JavaScript】如何获取指定范围内的随机数
  • 原文地址:https://blog.csdn.net/Fanbin168/article/details/133955008