vue----(父组件和子组件之间的相互传递)

1.父组件与子组件传值props

首先呈现的是父组件的代码：

<template>
    <div class="addNotice">
        <Title :value="`企业公告`" :isChoose="true"></Title>
    </div>
</template>

<script>
  import Title from '@/components/Title'

   components: {
      Title
    },

</script>

然后是子组件的代码：

<template>
    <div>
      <h2 class="title" :class="{colorStyle:isChoose}">{{value}}</h2>
    </div>
</template>

 export default {
        name: 'index',
        props:['value','isChoose'],
    }

 父组件则通过增加属性的形式传递数据给子组件，子组件通过 props方法获取父组件传递过来的值。

2.子组件向父组件传递数据

子组件代码：

<template>
  <div>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="list"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="totalVal">
    </el-pagination>
  </div>
</template>
<script>

    export default {
      name: 'index',
      data(){
          return{
            currentPage: 1,
          }
      },
      props:['list','pageSize','totalVal'],
      methods:{
        handleSizeChange(val) {
          // console.log(`每页 ${val} 条`);
          this.$emit('handleSizeChange',val)
        },
        handleCurrentChange(val) {
          // console.log(`当前页: ${val}`);
          this.$emit('handleCurrentChange',val)

        }
      }
    }
</script>

父组件代码：

<template>
  <div>
   <pagination 
      @handleSizeChange="handleSizeChange" 
      @handleCurrentChange="handleCurrentChange"
      :list="[5,10,20,50]" 
      :pageSize="5" 
      :totalVal="11">
   </pagination>
  </div>
</template>
<script>
  import Pagination from '@/components/Pagination'
  components: {
      Pagination
    },
  methods: {
      handleSizeChange(data) {
        console.log('我是子组件传过来的值---当前每页展示多少条', data)
      },
      handleCurrentChange(data) {
        console.log('我是子组件传过来---当前在第几页', data)
      }
    }
</script>

子组件通过$emit方法（用来触发事件,详情见官网）传递参数