vue分别利用$emit/sync修饰符和vuex封装select组件

责编:menVScode 2017-12-15 23:40 阅读(2614)

        利用$emit/sync修饰符封装select组件

        List.vue

<template>
    <div class="list">
        <p v-for="item in data" @click="getTitleHandle(item.name)">{{item.name}}</p>
    </div>
</template>
<script>
    export default {
        name:'list',
        props:['data','isShow',],
        data(){
            return {
                
            }
        },
        computed:{
            initShow(){
                return !this.isShow
            }
        },
        methods:{
            getTitleHandle(name){
                // this.$emit('update:inputVal',item.name)
                // this.$emit('update:isShow',this.initShow)
                this.$emit('changeTitle',{name:name,initShow:this.initShow})
            }
        }
    }
</script>

        SelectInput.vue

<template>
    <div class="">
        <input type="text" readonly placeholder="请选择" :value="title" @click="showListHandle">
    </div>
</template>
<script>
export default {
    name:'input',
    props:['isShow','title'],
    data(){
        return {}
    },
    computed:{
        initShow(){
            return !this.isShow
        }
    },
    methods:{
        showListHandle(){
            this.$emit('update:isShow',this.initShow)
        }
    }
}
</script> 

          Select.vue

<template>
    <div class="wrap">
        <!-- .sync:子组件is-show值改变后,父组件is-show值立马改变 -->
        <select-input :is-show.sync="listShow" :title="title"></select-input>
        <list 
            v-show="listShow"
            :data="listData" 
            :input-val.sync="title"
            :is-show.sync="listShow"
            @changeTitle="titleHandle"></list>
    </div>
</template>
<script>
    import List from '@/components/List'
    import SelectInput from '@/components/SelectInput'

    let listData = [
        {name:'语文'},
        {name:'数学'},
        {name:'英语'},
        {name:'生物'},
        {name:'物理'}
    ]

    export default {
        name:'Header',
        data(){
            return {
                listData,
                listShow:false,
                title:''
            }
        },
        components:{
            SelectInput,
            List
        },
        methods:{
            titleHandle(val){
                console.log(val)
                this.title = val.name
                this.listShow = val.initShow
            }
        }
    }
</script>
<style>
    .wrap{padding:50px;width:200px;}
</style>


        vuex封装select组件

        store/index.js

import Vue from 'vue'
import Vuex from 'vuex'
import axios from 'axios'

Vue.use(Vuex)

let store = new Vuex.Store({
    state:{ //应用中需要的状态数据
        count:100,
        title:'',
        list:[]
    },
    getters:{
    },
    mutations:{//不能直接改变state中的状态,唯一途径显示的提交mutations
        getTitle(state,obj){
            state.title = obj.name
        },
        getList(state,list){
            state.list = list
        }
    },
    actions:{
        getListAction({commit}){//参数:对象,不是当前的store实例,context对象包含了当前实例的一些方法
            //发送请求
            axios.get('https://easy-mock.com/mock/5a361e643b8a9b34fc316389/example_1513496164192/selectDate')
                .then((data)=>{
                    // console.log(data)
                    commit('getList',data.data.data) //拿到数据后,提交mutation,改变状态
                })
                .catch((error)=>{
                    console.log(error)
                })
        }
    }
})

export default store

        List.vue

<template>
    <div class="list">
        <p v-for="item in dataList" @click="getTitleHandle(item.name)">{{item.name}}</p>
    </div>
</template>
<script>
    import {mapMutations} from 'vuex'
    export default {
        name:'list',
        props:['isShow'],
        computed:{
            initShow(){
                return !this.isShow
            },
            dataList(){
                return this.$store.state.list
            }

        },
        methods:{
            getTitleHandle(name){
                this.$store.commit('getTitle',{name})
                this.$emit('changeTitle',{initShow:this.initShow})
            }
        },
        created(){
            this.$store.dispatch('getListAction')
        }
    }
</script>

                SelectInput.vue

<template>
    <div class="">
        <input type="text" readonly placeholder="请选择" :value="title" @click="showListHandle">
    </div>
</template>
<script>
import {mapState} from 'vuex'
export default {
    name:'input',
    data(){
        return {}
    },
    computed:{
        initShow(){
            return !this.isShow
        },
        ...mapState(['title'])
    },
    methods:{
        showListHandle(){
            this.$emit('update:isShow',this.initShow)
            
        }
    }
}
</script> 

        Select.vue

<template>
    <div class="wrap">
        <!-- .sync:子组件is-show值改变后,父组件is-show值立马改变 -->
        <select-input :is-show.sync="listShow"></select-input>
        <list 
            v-show="listShow"
            :is-show.sync="listShow"
            @changeTitle="titleHandle"></list>
    </div>
</template>
<script>
    import List from '@/components/List'
    import SelectInput from '@/components/SelectInput'

    export default {
        name:'Header',
        data(){
            return {
                listShow:false,
            }
        },
        components:{
            SelectInput,
            List
        },
        methods:{
            titleHandle(val){
                console.log(val)
                this.listShow = val.initShow
            }
        }
    }
</script>
<style>
    .wrap{padding:50px;width:200px;}
</style>
标签: vuex sync $emit vue
前端交流群: MVC前端网(menvscode.com)-qq交流群:551903636

邮箱快速注册

忘记密码