vue 父子兄弟子父传值

子向父

子组件标签有个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">&#xe603;</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，按照这个格式写进去，直接在组件引用即可

vue 父子 兄弟 子父传值

猜你喜欢

vue 父子兄弟子父传值