主页（一）02-搜索栏组件的封装

搜索栏组件的封装

通用组件抽取 <div class="search"> <div class="search-item"> <icon type='search'/> <span>搜索</span> </div> </div> // 导入组件 import SearchBar from '../../components/searchbar' // 配置组件 exports default { components: { 'search-bar': SearchBar } } // 使用组件 <template> <search-bar></search-bar> </template>

封装组件的步骤：

第一步：在src文件夹下的components文件夹下新建文件SearchBar.vue,把搜索栏内容进行抽取

<template> <div class="search"> <div class="search-item"> <icon type='search'/> <span>搜索</span> </div> </div> </template> <script> export default { data () { return {} } } </script> <style> .search { background-color: #EB4450; padding: 20rpx; } .search-item { background-color: #fff; padding: 10rpx; text-align: center; color: #888; } .search-item icon { vertical-align: middle; } </style>

第二步：在所需页面home/index.vue中进行引入、注册和使用

第三步：新建文件后，要 npm run dev 进行重启项目，展示效果同上