本文已参与[新人创作礼]活动，一起开启掘金创作之路。

父组件传子组件-props

props是父组件传值给子组件的常用方式，作用是父组件向子组件单独传递数据。

可以传递字符串、数组、对象等，在props接收时，也可进行一些限制。

父组件parentComponent.vue

<template>
    <div>
       <span>这是父组件------{{parantData}}</span> 
       <!-- :dataList="parantData" 使用v-on绑定，将parantData传给子组件 -->
       <children-component :dataList="parantData"></children-component>
    </div>
</template>

<script>
import childrenComponent from '@/components/childrenComponent'
export default {
  components: { childrenComponent },
    name: 'parentComponent',
    data(){
        return{
            parantData: '我是父组件传递给子组件的值'
        }
    }
}
</script>

<style  lang="less">

</style>

其中，parantData为需要传递的值，父组件的data中定义值，引入并调用子组件，在引用的子组件的标签上通过v-bind指令给子组件传值，子组件通过在data中定义的props属性接收父组件传过来的值然后应用到子组件里。

父组件向子组件传递方法，使用的是事件绑定机制 v-on:传递给子组件的方法名="父组件中的方法"。

子组件childrenComponent.vue

<template>
    <div>
        这是子组件：父组件传过来的值为:{{dataList}}
    </div>
</template>

<script>
export default {
    name: 'childrenComponent',
    // 子组件使用propos接收,有多种方法接收。
    // 第一种：直接字符串接收
    // props:['dataList']
    // 第二种：类型，还可以设置默认值、是否必须等。
    props:{
        dataList:{
            type: String
        }
    }
}
</script>

<style  lang="less">

</style>

子组件中用props接收，接收的值可以直接使用。

这样子组件就可以接收到-我是父组件传递给子组件的值-这句话。

这里是props接收时的不同写法，摘抄官网的设置，可以是数组、对象，也可以设置默认值、是否必须等：

props: {
    // Basic type check
    //  (`null` and `undefined` values will allow any type)
    propA: Number,
    // Multiple possible types
    propB: [String, Number],
    // Required string
    propC: {
      type: String,
      required: true
    },
    // Number with a default value
    propD: {
      type: Number,
      default: 100
    },
    // Object with a default value
    propE: {
      type: Object,
      // Object or array defaults must be returned from
      // a factory function. The function receives the raw
      // props received by the component as the argument.
      default(rawProps) {
        return { message: 'hello' }
      }
    },
    // Custom validator function
    propF: {
      validator(value) {
        // The value must match one of these strings
        return ['success', 'warning', 'danger'].includes(value)
      }
    },
    // Function with a default value
    propG: {
      type: Function,
      // Unlike object or array default, this is not a factory function - this is a function to serve as a default value
      default() {
        return 'Default function'
      }
    }
  }

子组件传父组件-$emit

子组件也可以向父组件传值，子组件可以使用 $emit调用父组件的方法并传递数据。

比如，子组件更新了数据后，想在父组件也更新一下。

vm.$emit( event, arg ) //触发当前实例上的事件

vm.$on( event, function );//监听event事件后运行 function；

父组件parentComponent.vue

<template>
    <div>
       <span>这是父组件{{myList}}</span> 
       <!-- myData -->
       <children-component @dataList="myData"></children-component>
    </div>
</template>

<script>
import childrenComponent from '@/components/childrenComponent'
export default {
  components: { childrenComponent },
    name: 'parentComponent',
    data(){
        return{
            myList:{}
        }
    },
    methods:{
        myData(value){
            this.myList = value;
        }
    }
}
</script>

<style  lang="less">

</style>

子组件childrenComponent.vue

<template>
    <div>
        这是子组件
        <button type="primary" @click="updateData">更新父组件的值</button>
    </div>
</template>

<script>
export default {
    name: 'childrenComponent',
    data(){
        return{
            list:{
                value: 'value1',
                type: 'type1'
            }
        }
    },
    methods:{
        updateData(){
            this.$emit('dataList',this.list);
        }
    }
}
</script>

<style  lang="less">

</style>

点击按钮父组件的方法就触发