Vue随笔（三）父子组件传值

一、父传子
父：

<ad-targeting v-bind:planToInfo="form.planToInfo"></ad-targeting>

import AdTargeting from "@/views/DspMgmt/components/AdTargeting";
export default {
    components: {AdTargeting},
}

子：

<el-card :body-style="{ maxHeight: '100px',overflow: 'auto'}">
    <div v-for="(address, index) in comAreaList" :key="index">
        {{address}}
    </div>
</el-card>

第一种props处理

export default {
    name: "AdTargeting",
    props: {
         planToInfo: {
            type: Object//组件实例创建之前进行验证，所以实例的属性 (如 data、computed 等) 在 default 或 validator 函数中是不可用的，验证失败的时候，Vue 将会产生一个控制台的警告。
        }
    },
    computed: {
        comPlanToInfo(){
            return this.planToInfo;
        },
        comAreaList(){
            let areaList = [];
            let list = this.comPlanToInfo ? this.comPlanToInfo.provinceCityList : [];
            for(let i=0; i<list.length; i++){
                let provinceName = list[i].provinceName ? list[i].provinceName : "";
                let cityName = list[i].cityName ? list[i].cityName : "";
                let areaName = list[i].areaName ? list[i].areaName : "";
                areaList.push(provinceName + cityName + areaName);
            }
            return areaList;
        },
    },
}

第二种props处理

data: function () {
  return {
    comAreaList: this.planToInfo
  }
}

props还可以是一个自定义的构造函数，并且通过 instanceof 来进行检查确认。

function Person (firstName, lastName) {
  this.firstName = firstName
  this.lastName = lastName
}

可以用以下代码验证author prop 的值是否是通过 new Person 创建的

Vue.component('ad-targeting', {
  props: {
    author: Person
  }
})

二、子传父
在Vue中，父子组件的关系可以总结为，prop向下传递，事件向上传递。
父组件通过prop给子组件下发数据，子组件通过事件给父组件传递消息。
每个Vue实例都实现了事件接口，使用$on(eventName)监听事件，使用$emit(eventName,optionalPayload)触发事件。另外，父组件可以在使用子组件的地方直接用v-on来监听子组件触发的事件。
父组件在组件上定义了一个自定义事件childFn，事件名为parentFn用于接受子组件传过来的message值。

<!-- 父组件 -->
<template>
    <div class="test">
      <test-com @childFn="parentFn"></test-com>
      <br/> 
      子组件传来的值 : {{message}}
    </div>
</template>

<script>
export default {
    // ...
    data: {
        message: ''
    },
    methods: {
       parentFn(payload) {
        this.message = payload;
      }
    }
}
</script>

子组件是一个buttton按钮，并为其添加了一个click事件，当点击的时候使用$emit()触发事件，把message传给父组件。

<!-- 子组件 -->
<template> 
<div class="testCom">
    <input type="text" v-model="message" />
    <button @click="click">Send</button>
</div>
</template>
<script>
export default {
    // ...
    data() {
        return {
          // 默认
          message: '我是来自子组件的消息'
        }
    },
    methods: {
      click() {
            this.$emit('childFn', this.message);
        }
    }    
}
</script>

通过"props down , events up"我们就简单的实现了父子组件之间的双向传值