详解vue引入子组件方法
2019-03-28 10:59
696 查看
前端框架vue,在利用脚手架工具vue-cli创建前端项目时候,怎么引入组件呢?下面是详细的写法。
1、第一步,利用vue-cli创建一个vue前端项目,文件夹如下图
2、第二步,例子是在hom.vue界面引入子组件header.vue,如下图
3、第三步,给子组件header.vue命名一个全局的id,
export default { name: 'HomeHeader' }
代码如下图
4、第四步,返回home.vue组件,引用header.vue组件代码如下图
HomeHeader 对应上一步的命名;
首先引入界面
import HomeHeader from './pages/header'
然后渲染界面
export default {
name: 'home',
components: {
HomeHeader
}
}
5、第五步,进过引入界面和渲染界面后,可以在home.vue调用header.vue界面了,
<home-header></home-header>
对应HomeHeader大写变小写,连接处用-链接
如下图
6、第六步,运行项目,打开网页显示,子组件引入成功,如下图
您可能感兴趣的文章:
相关文章推荐
- 详解从新建vue项目到引入组件Element的方法
- 利用vue+elementUI实现部分引入组件的方法详解
- vue拖拽组件使用方法详解
- 浅谈Vue-cli单文件组件引入less,sass,css样式的不同方法
- 详解vue跨组件通信的几种方法
- vue引入其他框架组件方法汇总
- vue全局组件与局部组件使用方法详解
- Vue-cli单文件组件引入less、sass、css样式的不同方法
- vue环境下一个主页面引入多个子组件的方法
- 详解Vue组件插槽的使用以及调用组件内的方法
- React为 Vue 引入容器组件和展示组件的教程详解
- vue父组件通过props如何向子组件传递方法详解
- Vue.js路由组件vue-router使用方法详解
- vue组件tabbar使用方法详解
- 详解Vue 非父子组件通信方法(非Vuex)
- 详解Vue 多级组件透传新方法provide/inject
- 详解vue.js下引入百度地图jsApi的两种方法
- vue拖拽组件使用方法详解
- 详解利用jsx写vue组件的方法示例
- 在vue项目中引入highcharts图表的方法(详解)