父子组件使用 props和$emit传值总结（非常全面）

父子组件使用 props和$emit传值 总结:

一: 父传子。注意点有3个。
第1: 在js中用驼峰式命名，在html中替换成短横线 分割式命名

在html中
<child my-message="hello"/>

在js中:
子组件中
props:['myMessage']

第2: props规范写法
如果 有默认值，而且是 数组或者对象类型，props需要用规范写法:既必须用对象形式且必须 用函数返回。
默认值如果不是数组或者对象，则可以直接用数组形式写。
例:

props:{
   columns: {
     type:Array,
     default () {
     return [ ]
       }
    }，
    ap: {
     type:Object,     
     default () {     
     return {}      
     }   
    }，
    cc: {
     type:Boolean,
     default:true
    }，
    cl: {
     type:String,    
     default:"哈哈"  
     }，
     Kkk: {
     type:Function,
     default(){
     }
    }，

第3: 如果 设置了required 就不要设置 default

cc: {
     type:String,
     required:true//设置了required无需设置default
    }，

二:子传父。
设置的自定义事件是会自动触发的。

例如：代码如下

在 Hello.vue template中（子组件中），添加一个input输入框，给它一个v-model 获取用户的输入，再添加keypress的事件，用于发射事件，传输数据。script 中添加data，定义变量来获取用户的输入，添加methods 来处理keypress事件的处理函数enter, 整个Hello.vue 文件如下

子组件中：

<template>
  <div class="hello">
    <!-- 添加一个input输入框 添加keypress事件-->
    <input type="text" v-model="inputValue" @keypress.enter="enter">
    <p>{{mesFather}}</p>
  </div>
</template>

<script>
export default {
  props:['mesFather'],

  // 添加data, 用户输入绑定到inputValue变量，从而获取用户输入
  data: function () {
    return {
      inputValue: ''  
    }
  },
  methods: {
    enter () {
      this.$emit("valueUp", this.inputValue) 
      //子组件发射自定义事件valueUp, 并携带要传递给父组件的值，
      // 如果要传递给父组件很多值，这些值要作为参数依次列出 如 this.$emit('valueUp', this.inputValue, this.mesFather); 
    }
  }
}
</script>

在App.vue 中，（父组件中） template中hello 组件绑定一个自定义事件，@valueUp =“receive”, 用于监听子组件发射的事件，再写一个 p 元素，用于展示子组件传递过来的数据，

子组件传递过来的数据 {{ childMes }}

相应地，在scrpit中，data 中，定义一个变量childMes, 并在 methods 中，定义一个事件处理函数reciever。整个App.vue修改如下：

父组件中：

<template>
  <div id="app">
    <img src="./assets/logo.png">

    <!-- 添加自定义事件valueUp -->
    <hello mes-father="message from father" @valueUp="recieve"></hello>

    <!-- p元素，用于展示子组件传递过来的数据 -->
    <p>子组件传递过来的数据 {{childMes}}</p>
  </div>
</template>

<script>
import Hello from './components/Hello'

export default {
  name: 'app',
  components: {
    Hello
  },
  // 添加data
  data: function () {
    return {
      childMes:''
    }
  },

  // 添加methods，自定义事件valueUp的事件处理函数recieve
  methods: {
    recieve: function(mes) { // recieve 事件需要设置参数，这些参数就是子组件传递过来的数据，因此，参数的个数，也要和子元素传递过来的一致。
      this.childMes = mes;
    }
  }
}
</script>

这时在input中输入内容，然后按enter键，就以看到子组件传递过来的数据，子组件向父组件传递数据成功。

当在input输入框中输入数据，并按enter键时，它会触发keypress.enter事件，从而调用事件处理函数enter， 在enter 中， 我们发射了一个事件valueUp， 并携带了一个参数；

由于在<hello @valueUp=”recieve”></ hello> 组件中(父组件中)， 我们绑定valueUp 事件，所以父组件在时刻监听valueUp 事件。
当子组件发射value 事件时，父组件立刻捕获到，并立即调用它的回调函数receive, 在receive 中，我们获取到子组件传递过来的数据，并赋值了data 中的变量childMes, 由于data 数据发生变化，从而触发dom更新，页面中就显示子组件传递过来的内容。

其实在子组件中， props 最好的写法是props 验证，我们在子组件Hello.vue中写 props:[‘mesFather’], 只是表达出，它接受一个参数mesFather, 如果写成props 验证，不仅能表达出它需要什么参数，还能表达参数类型，并且如有错误，vue 会做出警告。现在把props 改成props 验证的写法, Hello.vue 中的js中的props修改如下：

props： {
      'mesFather': {
          type: String,
          default: 'from father',
          required:true
      }
  }

如果是组件与组件之间的通信非常复杂，不光是父子组件，还有兄弟组件，那就需要用到状态管理，vuex；