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方法(用来触发事件,详情见官网)传递参数