vue 组件有两种, 一种是全局组件, 一种是局部组件. 组件命名建议驼峰法. 编译器是 vscode
注册局部组件的方法: 直接在 vue 注册, 调用即可:
注: 适合当前页面用
- <template>
- <div>
- <new-Zujian>
- </new-Zujian>
- </div>
- </template>
- <script>
- export
- default {
- data() {
- return {}
- },
- components: {
- 'new-Zujian': { // 组件名
- template: '<p>new-Zujian 新局部组建 </p>'
- }
- }
- </script>
引入局部组件写法: 在需要使用局部组件页面中:
注: 这种是把整个 MyZujian.vue 页面中内容看为局部组件调用;
代码如下:
- // 需要使用 MyZujian 组件的页面
- <template>
- <div>
- <MyZujian></MyZujian>
- </div>
- </template>
- <script>
- import MyZujian from '@/components/MyZujian.vue';// 文件的相对路径
- export default {
- components: {
- MyZujian
- }, // 直接初始化就可以啦, 不需要 Vue.use();
- data() {
- },
- methods: {
- }
- };
- </script>
- <style lang="sCSS" scoped>
- // 样式代码
- </style>
引入全局组件写法: 在项目的 main.JS 中:
注: 通用代码写到 MyZujian.vue(新组件) 中进行封装, 全局调用, 适用整个项目
代码如下:
- import Vue from 'vue';
- import MyZujian from '@/components/MyZujian.vue'; // 导入自己写的组件文件, 相对路径
- Vue.use(MyZujian); // 自定义全局组件的时候需要 Vue.use();
- Vue.component('my-zujian', MyZujian); // 初始化组件;
- new Vue({
- el: '#app',
- router,
- components: {
- App,
- MyZujian // 这里也别忘记奥;
- },
- template: '<App/>',
- });
完成上面, 即新组件 < my-zujian></my-jian > 便可以在项目中的任何地方调用了;
?? 新手上路, 亲爱的们多多指教奥??~
来源: http://www.bubuko.com/infodetail-3500981.html