props和$emit的使用

一、props

props:用来接收父组件传递的数据，可以是数组，也可以是对象

props是在子组件里面写的，其值为一个数组，即props:[keyName]。其中的keyName是要传递的参数，但它是如何绑定到父组件的数据呢？在父组件里面用到子组件的时候，就在父组件文件中的子组件标签里面进行绑定keyName,然后keyName的值就是要绑定的父组件的数据。子组件里面要用到父组件数据时就直接用keyName就行。

二、$emit（）

$emit（）:子传父

子组件：child.vue

<template>
    <div class="parent">
      <p>{{childData}}</p>
      <Child @showData="updateData" :sendData="childData"></Child>
    </div>
</template>
<script>
  import Child from "./child";
  export default {
    components: {Child},
    data(){
        return {
            childData:"父组件传递给子组件的值"
        }
    },
    methods:{
      //通过触发子组件触发，修改父组件定义的值
      updateData(data){
       this.childData=data;
      }
    }
  }
</script>

父组件:parent.vue

<template>
  <div class="child">
    <h3>接收父组件传递过来的值：{{sendData}}</h3> 
    <br/>
    <button @click='toParent'>点击将子组件内容传递给父组件</button>
  </div>
</template>
<script>
  export default {
    props:['sendData'], 
    methods:{
      toParent() {
        this.$emit('showData',"通过$emit传递给父组件");//toParent事件触发后，自动触发showData事件
      }
    }
  }
</script>