[30天 Vue学好学满 DAY13] 组件

组件

可重复使用的实例，有自己的名子，引入後当元素使用。
Data 透过 return 定义为函数 -> 每个实例各自维护不互相影响

直接 new Vue 带入参数

data: {
    count: 0,
}

定义为函数

data() {
    return {
      count: 0,
    };
}

实作

定义组件 : HelloWorld.vue
HTML

<button @click="count++">触发次数 : {{ count }} </button>

srcipt

export default {
  name: "HelloWorld", // 非必要，可移除
  data() {
    return {
      count: 0,
    };
  }
};

於 App.vue 引入并复用
引入

import HelloWorld from './components/HelloWorld.vue';

注册

components: {
    HelloWorld
},

组件定义名称:
kebab-case:单词连接
PascalCase:驼峰式命名法（upper camel case）
ps.两者可互用

HTML

复用 HelloWorld.vue
<hello-world />
<hello-world ></hello-world>
<HelloWorld />

起前端检验

以上为局部注册

全局注册

於核心文件main.js中引入，并透过.component注册

import HelloWorld from './components/HelloWorld.vue';
Vue.component('component-hello', HelloWorld)

移除App.vue的局部注册，并新增全局组件於HTML

<!-- 局部注册 -->
<hello-world />
<hello-world ></hello-world>
<HelloWorld />
<!-- 全局注册 -->
<component-hello />

起前端检验
仅剩全局组件

上述局部注册为於特定组件进行引入，若皆从main.js引入，则如下

// 全局
Vue.component('component-hello-global', HelloWorld)
new Vue({
  components: {
    // 局部
    'component-hello-local': HelloWorld
  },
  render: h => h(App),
}).$mount('#app')

有错误请不吝指教!
参考资料
https://vuejs.org/v2/guide
https://segmentfault.com/a/1190000019903495

感谢各路大神