vue基础知识(1)-组件通信

1. 父向子组件通信——props

// 父组件中prop用中划线连接

     
export default {
   props: {
       // 子组件中用驼峰接收prop 
       caseMessage : {
          // type 不加引号
          type : String, 
          // 如果是引用类型（数组、对象）要写成function形式
          default : ""  
       }
   }
}

• 传递props时，除了需要传入字符串以为，其余都需要加 : 冒号

             // 数字2 
          // 布尔值true
       // 数组
     // 对象
          // 变量
          // 字符串

• 不要直接修改传入子组件的props，如果有需要修改，复制一份到自己的data中。

2. 子向父组件通信——$emit

// 父组件 —— 父组件用事件接收子组件传来的值


// 子组件
methods: {
  incrementCounter: function () {
         // 子组件派发自定义事件给父亲，第一个参数是事件名，第二个参数是传给父亲的数据
         this.$emit('increment', data)
  }
}

• 如果需要给组件加原生事件(click,mouseover,mpuseup...)，需要用到native。

• 自定义事件不带参数，默认传入子组件传递的数据到参数中，且自定义事件不存在事件对象($event.target)，而原生事件默认会传入事件对象($event)

 //无参数

methods: {
  // 自定义事件
  incrementTotal(data) {
    // 子组件传递给父亲的data
    console.log(data)
  }
  // 原生事件
  clickFunction($event) {
    // 事件对象 其中有鼠标位置 dom对象等常用的信息
    console.log($event) 
    // $event.target.value 可以实时获取输入框的值
   }
}

• 自定义事件和原生事件需要传入自己的参数。

// 需要带自己的参数，则用$event来接收子组件传入的数据和事件对象。
//只能写$event
methods: {
   // 自定义事件
   incrementTotal(data, val) {
      console.log(data)  // 子组件传递给父亲的data
      console.log(val)   // 222
   }
   // 原生事件
   clickFunction($event, val) {
      console.log($event) // 事件对象 其中有鼠标位置 dom对象等常用的信息
      console.log(val)    // 333
   }
}

3. 组件与组件通信—— $emit/$on 或 VUEX（用VUEX）