Vue18_父传子&子传父

最新推荐文章于 2024-03-25 13:01:07 发布

ParadoxLin

最新推荐文章于 2024-03-25 13:01:07 发布

阅读量370

点赞数

分类专栏： Vue 文章标签： vue

本文链接：https://blog.csdn.net/linxwx/article/details/114155719

版权

Vue 专栏收录该内容

21 篇文章 0 订阅

订阅专栏

B站教程-父子组件通信

1. 父传子：通过props

子组件在props中创建一个属性，用以接收父组件传过来的值
父组件中注册子组件
在子组件标签中添加子组件props中创建的属性
把需要传给子组件的值赋给该属性

P.S.每个Vue实例都是root根组件，可作为父组件

在这里插入图片描述

2. props数据验证

在上面的案例中，我们的props选项是一个数组，除了数组，我们也可以使用对象：

用于对props进行类型等验证：（要求对方传入时的类型）
在类型限制的同时提供一些默认值

//1. 类型限制
props:{
  cmovies:Array;//数组类型
  cmessage:String;//字符串类型

//2. 类型限制并提供默认值，
//默认值在没有传值的时候显示
props:{
 cmsg:{
    type:String,
    default:'aaa'
  }
  cnumber:{
    type:Number,
    default: 100
  }
  cmmssgg:{
    type:String,
    default:'aaa'
    required: true
  }
}

注：required属性为true时意味着传值(v-bind
绑定)时必须有cmmssgg这一属性，否则将会报错

PS：当类型是对象或数组时，默认值必须是一个函数:

props:{
  cmovies:{
  type: Array,
  default(){
	  return [] //默认值为空数组，
	            //也可以返回别的
    }
  }

  cmsg:{
  type: Object,
  default:function(){
      return ( msg:'hello')
    }
  }

//还可以自定义验证函数
  cplus:{
  validator:function(value){
  //该值必须匹配下列字符串中的一个，否则报错
	return['success','warning','danger'].indexof(value) !== -1
	}
  }

}

3. 子传父：通过自定义事件

在子组件中，通过$emit()来发射事件。
在父组件中，通过v-on来监听子组件事件。
参数：将需要传的值作为$emit的第二个参数，该值将作为实参传给响应自定义事件的方法

例：定义两个按钮+1和-1，点击后修改counter。
我们整个操作的过程还是在子组件中完成，但是之后的展示交给父组件。这样，我们就需要将子组件中的counter，传给父组件的某个属性，比如total。

<body>
  <div id="app">
    <child-cpn @increment="changeTotal" @decrement="changeTotal"></child-cpn>
    <!-- 如上，通过v-on来监听子组件事件-->
    <h2>计数：{{ total }}</h2>
  </div>
</body>

<template id="cpn">
  <div>
    <button @click="increment">+1</button>
    <button @click="decrement">-1</button>
  </div>
</template>

<script>
  new Vue({
    el:"#app",
    data:{
      total: 0
    },
    methods:{
      changeTotal(counter){
        this.total = counter
      }
    },
    components:{
      'child-cpn':{
        template: "#cpn",
        data(){
          return {
            counter: 0
          }
        },
        methods:{
          increment(){
            this.counter++;
            this.$emit('increment', this.counter)
          },
          decrement(){
            this.counter--;
            this.$emit('decrement', this.counter)
          }
        }
      }
    }
  })
</script>