/**1.封裝組件 局部 封裝**/

// 1.創(chuàng)建組件構(gòu)造器對象
const cpnC = Vue.extend({
template: `
<div>
</div>`
})；

//2.注冊組件

Vue.component('my-cpn',cpnC);

//3.使用組件

<my-cpn></my-cpn>

2.全局封裝

const app2 = new Vue({
el: '#app2',
components: {
// cpn使用組件時的標簽名
mycpn: cpnC
}
})

語法糖的方式：

/****2 vuecli 封裝組件****/

APP.vue 文件

<template>
<div id="app">
<h2>我是APP組件</h2>
<!--<router-link to="/home" tag="button" replace active-class="active">首頁</router-link>-->
<!--<router-link to="/about" tag="button" replace active-class="active">關(guān)于</router-link>-->
<!--<router-link to="/home" tag="button" replace>首頁</router-link>-->
<!--<router-link to="/about" tag="button" replace>關(guān)于</router-link>-->
<!--<button @click="homeClick">首頁</button>-->
<!--<button @click="aboutClick">關(guān)于</button>-->
<router-link to="/home">首頁</router-link>
<router-link to="/about">關(guān)于</router-link>
<router-link :to="'/user/'+userId">用戶</router-link>
<!--&lt;!&ndash;<router-link to="/profile">檔案</router-link>&ndash;&gt;-->
<router-link :to="{path: '/profile', query: {name: 'why', age: 18, height: 1.88}}">
檔案</router-link>
<!-- <button @click="userClick">用戶</button>
<button @click="profileClick">檔案</button> -->
<keep-alive exclude="Profile,User">
<router-view/>
</keep-alive>
</div>
</template>
<script>
import HomeNews from "./components/HomeNews";
import Home from "./components/Home";
export default {
name: 'App',
components: {Home, HomeNews},
data() {
return {
userId: 'zhangsan',
imgURL: 'http://www.baidu.com/logo.png'
}
},
methods: {
homeClick() {
// 通過代碼的方式修改路由 vue-router
// push => pushState
// this.$router.push('/home')
this.$router.replace('/home')
console.log('homeClick');
},
aboutClick() {
// this.$router.push('/about')
this.$router.replace('/about')
console.log('aboutClick');
},
userClick() {
this.$router.push('/user/' + this.userId)
},
profileClick() {
this.$router.push({
path: '/profile',
query: {
name: 'kobe',
age: 19,
height: 1.87
}
})
}
}
}
</script>
<style>
/*.router-link-active {*/
/*color: #f00;*/
/*}*/
.active {
color: #f00;
}
</style>

main.js

import Vue from 'vue'
import App from './App'
import router from './router'
import axios from 'axios'
Vue.prototype.$axios = axios
axios.defaults.baseURL = 'serveies'
Vue.config.productionTip = false
// prototype.name = "coderwhy"
new Vue({
el: '#app',
router,
render: h => h(App)
})
// axios.post('http://httpbin.org/', {
// firstName: 'Fred',
// lastName: 'Flintstone'
// })
// .then(function (response) {
// console.log(response);
// })
// .catch(function (error) {
// console.log(error);
// });
axios.get('/http://httpbin.org/', {
params: {
ID: 12345
}
})
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
router / index.js

// 配置路由相關(guān)的信息
import VueRouter from 'vue-router'
import Vue from 'vue'
// import Home from '../components/Home'
// import About from '../components/About'
// import User from '../components/User'
const Home = () => import('../components/Home')
const HomeNews = () => import('../components/HomeNews')
const HomeMessage = () => import('../components/HomeMessage')
const About = () => import('../components/About')
const User = () => import('../components/User')
const Profile = () => import('../components/Profile')
// 1.通過Vue.use(插件), 安裝插件
Vue.use(VueRouter)
// 2.創(chuàng)建VueRouter對象
const routes = [
{
path: '',
// redirect重定向
redirect: '/home'
},
{
path: '/home',
component: Home,
meta: {
title: '首頁'
},
children: [
// {
// path: '',
// redirect: 'news'
// },
{
path: 'news',
component: HomeNews
},
{
path: 'message',
component: HomeMessage
}
]
},
{
path: '/about',
component: About,
meta: {
title: '關(guān)于'
},
beforeEnter: (to, from, next) => {
console.log('about beforeEnter');
next()
}
},
{
path: '/user/:id',
component: User,
meta: {
title: '用戶'
},
},
{
path: '/profile',
component: Profile,
meta: {
title: '檔案'
}
}
]
const router = new VueRouter({
// 配置路由和組件之間的應(yīng)用關(guān)系
routes,
mode: 'history',
linkActiveClass: 'active'
})
// 前置守衛(wèi)(guard)
router.beforeEach((to, from, next) => {
// 從from跳轉(zhuǎn)到to
document.title = to.matched[0].meta.title
// console.log(to);
// console.log('++++');
next()
})
// 后置鉤子(hook)
router.afterEach((to, from) => {
// console.log('----');
})
// 3.將router對象傳入到Vue實例
export default router
components/home.vue

<template>
<div>
<h2>我是首頁</h2>
<p>我是首頁內(nèi)容, 哈哈哈</p>
<router-link to="/home/news">新聞</router-link>
<router-link to="/home/message">消息</router-link>
<router-view></router-view>
<h2>{{message}}</h2>
</div>
</template>
<script>
export default {
name: "Home",
data() {
return {
message: '你好啊',
path: '/home/news'
}
},
created() {
console.log('home created');
},
destroyed() {
console.log('home destroyed');
},
// 這兩個函數(shù), 只有該組件被保持了狀態(tài)使用了keep-alive時, 才是有效的
activated() {
this.$router.push(this.path);
console.log('activated');
},
deactivated() {
console.log('deactivated');
},
beforeRouteLeave (to, from, next) {
console.log(this.$route.path);
this.path = this.$route.path;
next()
}
}
</script>
<style scoped>
</style>

<style>

可以引入公共樣式
@import "./assets/css/base.css";
</style>

總結(jié)

以上是生活随笔為你收集整理的vue 封装组件供全局使用_vue 封装组件的基本操作的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。