vuejs学习2.7 语法——组件化开发2——组件通信与访问

组件通信

父传子——props

在每个组件中使用 v-bind:cmovies=“movies” movies为父组件数据 ，传给子组件cmovies表示，通过props来向子子组件传递
props可以是一个数组，可以是一个对象（做类型限制，提供默认值）
类型限制包含：String，Number，Boolean，Array，Object，Date，Function，Symbol

做类型限制

    //做类型限制
    props:{
      cmovies:Array,
      cmessage:String,
    }

提供默认值（设置默认值,数组和对象必须是函数）

//提供一下默认值
    props:{
      cmovies:{
        type:Array,
        default(){
          return []
        },//设置默认值,数组和对象必须是函数，其他的可以直接写
        required:false,//true表示传值必须传，否者报错
      },
      cmessage:{
        type:String,
        default:"aaa",//设置默认值
        required:false,//true表示传值必须传，否者报错
      },
    }

validator定义验证函数

props:{
      cmessage:{
        type:String,
        default:"aaa",//设置默认值
        required:true,//true表示传值必须传，否者报错
        validator:function (value) {
          //这个值必须匹配下列字符串的一个
          return ['success','warning','danger'].valueOf(value)!==-1
        }
      },
    }

子传父（自定义事件）

在子组件中通过this.$emit()来触发事件，在父组件中v-on来监听子组件事件

如下：在子组件中发生点击事件，发出 this.$emit(“itemclick”,item) 发射事件itemclick,item表示传递的参数，在父组件中监听事@itemclick=“cpnClick”，监听了itemclick事件，响应了cpnClick函数

双向传递

通过v-bind和v-on结合实现双向传递

（event.target.value来获取input中的值）
（双向绑定v-model不能绑定props的值，否则会报错）

  
{{num1}}
  
{{num2}}
  

通过watch实现

watch能够监听某个属性的改变，名称为属性名，参数为newValue和oldValue

  
{{num1}}
  
{{num2}}
  

组件访问

父访问子（$children）

拿到所有子组件用$children，this. $children是一个数组类型，包含了所有子组件对象，

  
  
  按钮

打印两个 “我是子组件的name”

父访问子（$refs）

拿到特定的子组件用$refs，在组件中定义ref，来通过 $refs来实现

  
  
  
  按钮

子访问父（$parent —— $root）

访问父组件用$parent ，访问根组件用 $root