Vue组件踩坑与心得

事实上的确如此,产品需求总是千奇百怪。正如我公司现在的产品,引用的是elemen-ui的库,但是无法级联多选,下拉多选的展现形式不对,穿梭框无法上下移动等各种需求逼迫我们只能自己去写组件实现了。

自己手写实现了两个组件之后,先写一篇记录一些坑和学会的新东西

1、子组件不允许修改父组件数据

之前在写angular的父子组件传递数据,子组件可以修改父组件传递进来的数据。不过在Vue中子组件不允许修改父组件穿进来的值,以vue举例来说





export default({
    data(){
        return {
            data : [1,2,3,4]
        }
    }
})


export default({
    props : ["value"],
    created : {
        this.value = [5,6,7,8];
    }
})

此举会引发一个非常常见的报错,

那么解决方法是什么呢,那就要看你需求了。比如传进来的是一个渲染列表,我需要的只是修改渲染的数据,那么可以emit出去,然后在父组件重新赋值,通过双向绑定,触发子组件的再次渲染。






export default({
    data(){
        return {
            data : [1,2,3,4]
        }
    },
    methods : {
        changeData(value){
            this.data = value;
        }
    }
})


export default({
    props : ["value"],
    created : {
        this.$emit("changeProp",[5,6,7,8])
    }
})

例子写的比较简单,其实原理就是emit一个数据到父组件上去,然后在父组件中接受到这个传递上来的新值,将data赋予新值,然后重新传递到了子组件,起到一个变向修改子组件的效果。

2.Vue给每个组件提供了一个默认的父子传递事件v-model。

但是你每次父子组件传递数据时,都要父子处定义一个事件是很麻烦的,vue则为每个组件提供了一个默认v-model的语法糖。





export default({
    data(){
        return {
            data : [1,2,3,4]
        }
    },
    watch : {
        //可以在此处监听子组件传递上来的数据
        data(n,o){
            console.log(n,o);   //[5,6,7,8],[1,2,3,4]
        }
    }
})



export default({
    
    //  props : ["value"]
    
    created : {
        console.log(this.value);
        this.$emit("input",[5,6,7,8]);  //当我想改变传进来值的时候
    }
})

因为之前一直使用ng-model来用于表单组件的传递,所以开始对于v-mode也是这个印象,不过后面看了element-ui的源码才发现我想简单了,然后网上搜了一下对于这个语法糖的解释。

//注意,该组件不是表单组件

看了这行代码大家心里估计也能明白的差不多了,其实Vue只是帮我们把父组件上的两段声明合二为一了,同时再帮我们在子组件处直接省略了定义。语法糖说到底就是帮我们省力的嘛。

3.全局一次性引用写好的组件

假如我们写好了一些组件,接下去肯定还要引入和使用吧。但是你写了这么多组件,在每个地方一个个引用想要的是一件很麻烦的事情。我们最好是在一个初始的地方一次性全部引入,然后在用的地方直接使用

(当然全部引入无可避免的会引入和打包不需要的东西,不过这是公共组件库的烦恼,我们自己写的肯定会全部用到)。

// 在文件开头初始引入所有的组件文件
import b from "./components/common/b.vue"
import c from "./components/common/c.vue"

const components = [b,c];

const install = function (Vue, opts = {}) {
	components.map(component => {
		Vue.component(component.name, component);
	});
};

export default install

然后直接在启动的main.js文件里面引入就好

import ui from "install.js"
Vue.use(ui);

然后你就可以随意在任何一个组件里面直接调用了,比自己之前在每个组件里重复调用要方便一点。



好了,暂时到这里,都是自己的踩得坑和心得,希望对大家有所帮助吧,接下去还有的话再补充好了。干货不多,烂笔头为主。

你可能感兴趣的:(Vue组件踩坑与心得)