vue组件之间传参(一看就懂)

首先父组件中引用子组件,通过import 与 components ；

父组件像子组件传参通过标签内 :list='list' 子组件页面接收通过props：{list：{type：Array}}

子组件像父组件传参通过this.$emit('方法名',参数)

父组件：list.vue

<template>
  <div>
    <helloWorld :list="list" @change="change"></helloWorld>
  </div>
</template>
<script>
import helloWorld from '@views/helloWorld.vue'

export default {
  components: { helloWorld },
  data() {
    return {
      list: []
    }
  },
  mounted() {
  },
  methods: {
    change(item) {
      console.log(item)
    }
  }
}
</script>
<style scoped>

</style>

子组件：helloWorld.vue 

<template>
  <div>
    <el-button icon="el-icon-search" size="mini" type="primary" @click="handleAdd">搜索</el-button>
  </div>
</template>
<script>

export default {
  name: 'search',
  props: {
    list: {
      type: Array
    }
  },
  data() {
    return {
      addList: {
        pageNum: 1,
        pageSize: 10,
        month: '',
        name: ''
      }
    }
  },
  mounted() {
  },
  methods: {

    handleAdd() {
      this.$emit('change', this.addList)

    }
  }
}
</script>
<style scoped>

</style>