一、公共组件的创建和使用
前面已经学习vue组件时,了解了公共组件,但在脚手架项目中只使用过局部组件。这里是讲解全局组件如何在脚手架项目中去使用。
1、创建全局组件
在src/components/Common/目录下创建Header.vue组件。
<template> <div class="header"> 我是头部 </div> </template> <script> export default { name: "Header", data(){ return{ }; }, }; </script> <style scoped> </style>
2、引入和注册全局组件
main.js是整个项目的入口启动文件。随后引入和注册全局组件。
// main.js是整个项目的入口启动文件 // 导入npm下载的模块 import Vue from 'vue' // 导入自己编写的模块 // 不同在于如果是npm下载的from直接写名称,自己编写的模块 from后接路径 import App from './App.vue' // 1.引入全局的组件 import Header from './components/Common/Header.vue' // 2.注册全局组件 Vue.component(Header.name, Header); new Vue({ el: '#app', // DOM直接渲染 // appendChild() render: h => h(App) })
3、在入口组件中使用全局组件
<template> <!-- 组件的页面结构 --> <div id="app"> <Header/> <h3>{{msg}}</h3> <div v-html="title"></div> <ul> <!-- key绑定key的时候,如果数据中有id就绑定id,没有id绑定index --> <li v-for="(item, index) in datas" :key="index">{{item}}</li> </ul> <!-- 引入首页, --> <Home :text="text" @add="addHandler"/> </div> </template>
4、页面显示