VUE组件通信

时间：2020-05-14 14:41:57 收藏：0 阅读：51

一、父组件传值给子组件：

通过props属性接收数据：

props选项可以使用一个数组接收变量，也可以使用对象，当需要对props进行类型等验证时，就需要对象写法了。

验证支持的数据类型：

String, Number, Boolean, Array, Object, Date, Function, Symbol

使用方式：

Vue.component(‘my-component‘, {
    // 不使用类型检查
   //  props: [‘name1‘,‘name2‘] // 在子组件标签内通过 v-bind: name1="父组件data里变量名" ，传给name1变量
   
   // 使用类型检查
    props: {
        // 基础的类型检查（‘null‘匹配任何类型）
        propA: Number,   // 变量propA必须为数值
        // 多个可能的类型
        propB: [String, Number]
       // 必填的字符串
       propC: {
           type: String,
           required: true
       },
       // 带默认值的数字
       propD： {
           type: Number,
           default: 100
       },
       // 带默认值的对象
       propE： {
           type: Object,
           // 对象或数组默认值必须从一个工厂函数获取
           default： function () {
               return {message: ‘hello‘}
           }
       },
       // 自定义验证函数
       propF: {
           validator: function(value) {
               // 这个值必须匹配下列字符串中的一个
               return [‘sss‘, ‘aaaa‘, ‘fds‘].indexof(value) !== -1
           }
       }
    }
})

补：驼峰标识：

即：在vue中，v-bind绑定的属性名不支持驼峰，例如在props里面定义一个cInfo对象，使用驼峰命名，在绑定该对象时就不能使用v-bind: cInfo = "info",它会找不到props里面的cInfo对象，需要进行转换才行，即写成v-bind: c-info="info"

技术分享图片

二、子组件向父组件传递数据

在组件使用this.$emit(‘事件名‘,值)，发送一个事件，然后在父组件调用子组件的地方绑定该事件名，参数就是传来的值。

 // 子组件将value值传给父组件
   watch: {
    value: function () {
      console.log(this.value)
      this.$emit(‘getvalue‘, this.value)
    }
  }

// 父组件接收(这里使用了vue自定义标签component，通过is属性动态加载组件)
<div class="jy-detail">
    <component
      v-for="(item, index) in testitems"
      :key="index" 
      :is="item.type"
      :item="item"
      @getValue="fGetValue">
    </component>
</div>
----------------------------------------
 // JS方法
  methods: {
    fGetValue(value) {
      console.log(value)
    }
  }

注意：上述例子传的是单个值，在写父组件的@getValue="fGetValue"时，fGetValue是省略了括号的，这里会自动接收这个子组件传来的值并传给函数作为参数（传来的有几个值，在methods里的fGetValue()括号里写几个参数就行）。也可以写@getValue="fGetValue($event)"，但是当子组件传来多个参数时，使用$event只会接收传来的第一个参数。要想接收多个子组件传来的值可以使用@getValue="fGetValue(arguments)"，接收到的值会放到一个数组里：

技术分享图片

或者直接写多个参数接收。

还有一种情况，既要接收子组件传来的值，又要传父组件自定义的参数：

子组件传来的只有一个值时：

this.$emit(‘getvalue‘, this.value1) //子组件传值

父组件接收：

@getValue="fGetValue($event,patentparam)"  // parentparam父组件自定义参数

子组件传来的有多个值时：

this.$emit(‘getvalue‘, this.value1, this.value2, this.value3) //子组件传值

父组件接收：

@getValue="fGetValue(arguments,patentparam)"  // parentparam父组件自定义参数

三、父组件访问子组件方式

1、使用$children

使用this.$children获取的是一个子组件列表，可以通过索引获取某个特定子组件，使用较少，不方便改动。

2、使用$refs

在子组件标签上，使用ref属性绑定子组件名称，在父组件里使用this.$refs可获取所有子组件对象，再通过.名称即可获取某个特定子组件

四、子组件访问父组件

使用this.$parent,不过一般不建议使用。

因为使用它之后会增加耦合度，使子组件的复用性变低。

使用this.$root访问根组件，也很少使用。

原文：https://www.cnblogs.com/pureshee/p/12888166.html