Vue.js入门（12）Vue自定义组件

序言

 

自定义组件

Vue组件的三要素

1. props参数

2. slot定制插槽

3. event自定义事件

<template>
  <div class="headComponent">
    {{{ msg }}
  </div>
</template>

<script>
export default {
    props:['data','type'],
    inheritAttrs: false,
    data(){
        return{
            msg:'',
        }
    }
}
</script>
<style scoped>

</style>

至此就完成一个基本的组件了，要想使用这个组件，就需要在其他js文件中引入并注册：

import Head from '../components/headComponent.vue'

Vue子组件调用父组件的方法

https://blog.csdn.net/zgrkaka/article/details/100528714

资料

Vue中全局组件的封装与使用方法