正文
[vue]webpack中使用组件
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
https://blog.csdn.net/ywl570717586/article/details/79984909
vue.js中全局组件
-
全局组件的定义
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>全局组件</title>
</head>
<body>
<div id="app">
<app01></app01>
</div>
<template id="app01">
<div>
<p>app01</p>
</div>
</template>
<script src="node_modules/vue/dist/vue.js"></script>
<script>
let app01 = {
name: 'app01',
template: "#app01",
};
Vue.component(
'app01', app01
);
let vm = new Vue({
el: "#app",
})
</script>
</body>
</html>
-
全局组件一旦定义,想在哪里使用就在哪里使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>全局组件</title>
</head>
<body>
<div id="app">
<app02></app02>
</div>
<template id="app01">
<div>
<p>app01</p>
</div>
</template>
<template id="app02">
<div>
<p>app02</p>
<app01></app01>
</div>
</template>
<script src="node_modules/vue/dist/vue.js"></script>
<script>
let app01 = {
name: 'app01',
template: "#app01",
};
Vue.component(
'app01', app01
);
let app02 = {
name: 'app02',
template: "#app02",
};
let vm = new Vue({
el: "#app",
components:{app02}
})
</script>
</body>
</html>
webpack: 自定义全局组件并使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>全局组件</title>
</head>
<body>
<div id="app">
<app01></app01>
</div>
<template id="app01">
<div>
<p>app01</p>
</div>
</template>
<script src="node_modules/vue/dist/vue.js"></script>
<script>
let app01 = {
name: 'app01',
template: "#app01",
};
Vue.component(
'app01', app01
);
let vm = new Vue({
el: "#app",
})
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>全局组件</title>
</head>
<body>
<div id="app">
<app02></app02>
</div>
<template id="app01">
<div>
<p>app01</p>
</div>
</template>
<template id="app02">
<div>
<p>app02</p>
<app01></app01>
</div>
</template>
<script src="node_modules/vue/dist/vue.js"></script>
<script>
let app01 = {
name: 'app01',
template: "#app01",
};
Vue.component(
'app01', app01
);
let app02 = {
name: 'app02',
template: "#app02",
};
let vm = new Vue({
el: "#app",
components:{app02}
})
</script>
</body>
</html>
1.定义
2.Vue.use(login); //相对单文件, 多了这步
3.Vue.component('login', login);
4.其他vue使用.
login.vue
<template>
<div>login</div>
</template>
<script>
export default {
name: "login"
}
</script>
<style scoped>
</style>
main.js
import Vue from 'vue'
import App from './App.vue'
import login from './components/login.vue'
Vue.use(login);
Vue.component('login', login); //这两条两者一个就ok了.
new Vue({
el: '#app',
render: c => c(App)
});
https://mint-ui.github.io/docs/#/zh-cn2/quickstart
App.vue
<template>
<div>
<p>app</p>
<login></login>
</div>
</template>
<script>
export default {
name: "app"
}
</script>
webpack: 导入组件,局部使用
<template>
<div>
<p>app</p>
<login></login>
</div>
</template>
<script>
import login from './components/login.vue'
export default {
name: "app",
components: {
login
}
}
</script>
<template>
<div>
<p>app</p>
<login></login>
</div>
</template>
<script>
import login from './components/login.vue'
export default {
name: "app",
components: {
login
}
}
</script>
