VUE组件间传值

最新推荐文章于 2022-07-20 16:52:13 发布

kongmeili

最新推荐文章于 2022-07-20 16:52:13 发布

阅读量96

点赞数

分类专栏： vue 文章标签： vue

本文链接：https://blog.csdn.net/kongmeili/article/details/81365632

版权

vue 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

父组件to子组件
父组件：

<template>
	<olaPage :logo="logoMsg"></olaPage>
</template>
<script>
import olaPage from ''
export default {
	name: 'olaPage',
	data() {
    		return {
      			logoMsg:'hello world'
    		}
  	},
  	components:{olaPage}
}
<script>

子组件：

<template>
	<div>{{logo}}</div>
</template>
<script>
export default {
	name: 'olaPage',
	data() {
    		return {
      			currentPage: 1,
    		}
  	},
  	props:['logo']	
}
<script>

子组件to父组件

子组件部分：

<el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[5, 8, 10, 15]"
        :page-size="pagesize"
        layout="total, prev, pager, next, jumper, sizes"
        :total="tableData.length">
</el-pagination>

<script>
export default {
  name: 'olaPage',
  methods: {
      handleSizeChange(size) {
        console.log(`每页 ${size} 条`);
        this.pagesize=size;
        this.$emit('getPageSize',this.pagesize);
      },
      handleCurrentChange(currentPage) {
        console.log(`当前页: ${currentPage}`);
        this.currentPage = currentPage;
        this.$emit('getCurPage',this.currentPage);
      }
  }
}
</script>

父组件部分：

<olaPage @getPageSize="getPageSize" @getCurPage="getCurpage" :tableData="tableData"></olaPage>

methods:{
    getPageSize(msgSizePage){
      console.log("本页多少条="+msgSizePage);
      this.pagesize=msgSizePage
    },
    getCurpage(msgCurPage){
      console.log("当前页="+msgCurPage);
      this.currentPage=msgCurPage
    }
  }