子向父
子组件标签有个click
<div class="Pagination">
<el-pagination
@current-change="handleCurrentChange"
background
layout="prev, pager, next"
:total="1000">
</el-pagination>
</div>
script里:主要有$emit这个,给父组件传了两个参数,第二个就是你要传的值
<script>
import bus from '../assets/js/eventBus'
export default {
name: 'Pagination',
data () {
return {
numPage:''
}
},
methods:{
handleCurrentChange:function(data){
this.numPage=data-1;
//console.log(this.numPage);
this.$emit('ljj',this.numPage);
}
}
}
</script>
父组件接收:标签上v-on:后面写上emit的第一个参数,第二个="什么"里面写上事件名称,
然后父组件的methods里面创建个事件函数,回调就是传过来的值
<Pagination v-on:ljj="ljjfunc"></Pagination>
<script>
import Header from '@/components/header'
import sowingMap from '@/components/sowingMap'
import categorySearch from '@/components/categorySearch'
import commodityList from '@/components/commodityList'
import Pagination from '@/components/Pagination'
import Footer from '@/components/footer'
export default {
name: 'contens',
data () {
return {
}
},
components: {
Header,
sowingMap,
categorySearch,
commodityList,
Pagination,
Footer
},
methods:{
ljjfunc:function(data){
console.log(data);
}
}
}
</script>
父传子
父组件先把东西发给子组件:
data () {
return {
title:'购物车'
}
},
上面的是:定义父组件要给子组件发送的参数。
<Headertwo v-bind:title="title"></Headertwo>
上面的是:父组件在标签上定义title.
子组件接收:
<template>
<div class="headertwo layui-row">
<div @click="back">
<i class="layui-icon"></i>
</div>
<div>
{{title}}
</div>
</div>
</template>
<script>
export default {
name: 'Headertwo',
data () {
return {
}
},
props:{
title:{
type:String,
required:true
}
},
methods:{
back:function(){
this.$router.go(-1);//后退
}
}
}
</script>
定义一个props,按照这个格式写进去,直接在组件引用即可