Vue组件封装

 

我个人认为，前端开发过程中，要遵循的一点原则就是万物皆可封。就比如一个项目中，十个页面有九个都会用到Table表格，这时候PM突然给你发了句，在么？恭喜你，今天准点下班是实现不了了。一个小小的改动，同样的操作你就必须去ctrl+c，ctrl+v

假如你刚开始的时候，就把table封装成一个组件，然后多次调用，这时候可能一句代码就可以搞定PM，是不是爽歪歪

这时候你会问了，组件是什么？

组件（Component）是 Vue.js 最强大的功能之一。

组件可以扩展 HTML 元素，封装可重用的代码。

组件系统让我们可以用独立可复用的小组件来构建大型应用，几乎任意类型的应用的界面都可以抽象为一个组件树

组件的注册及使用

// 1.全局注册
1.1 注册
Vue.component('my-component-name', {  // ... 选项 ... })
//全局注册的组件可以用在任何新创建的跟实例模板中
// 组件名称支持短横杠和首字母大写两种方式，使用的时候两种方法也都支持

1.2使用(两种命名均支持)
<my-component-name />
<MyComponentName />

// 2.局部注册
2.1 注册
import MyComponentName from './MyComponentName';
components: {
    MyComponentName
}

2.2使用同1.2

组件传参之父传子

<!-- 父组件 -->
<template>
    <div>
        <my-child :parentMsg="parentMsg"></my-child>
    </div>
</template>

<script>
    import MyChild from './MyChild'

    export default {
        components: {
            MyChild
        },
        data() {
            return {
                parentMsg: "我是来自父组件的消息"
            }
        }
    }
</script>

<!-- 子组件 -->
<template>
    <div>
        <span>{{ parentMsg }}</span> // parentMsg = 我是来自父组件的消息
    </div>
</template>

<script>
    export default {
        props: {
            parentMsg: {
                type: String,
                default: '默认显示的信息'
            }
        }
    }
</script>

组件传参之子传父

<!-- 父组件 -->
<template>
    <div>
        <my-child @change="childChange"></my-child>
    </div>
</template>

<script>
    import MyChild from './MyChild'

    export default {
        components: {
            MyChild
        },
        methods: {
            childChange(e) {
                console.log(e); // 子组件触发了change
            }
        }
    }
</script>

<!-- 子组件 -->
<script>
    export default {
        create() {
            this.$emit('change', '子组件触发了change');
        }
    }
</script>

其实，组件的原理特别的简单，最重要的是养成习惯，看项目页面的时候就预先把组件给封装起来，还有就是有一个思想，假如你是使用者，你希望怎么去传参更爽一点。先从使用的角度去规划，随后再去封装。