vue-组件-组件化开发思想与组件注册

最新推荐文章于 2023-08-10 09:55:33 发布

gaog2zh

最新推荐文章于 2023-08-10 09:55:33 发布

阅读量211

点赞数

分类专栏： # vue 文章标签： vue

本文链接：https://blog.csdn.net/gaogzhen/article/details/107589699

版权

vue 专栏收录该内容

42 篇文章 8 订阅

订阅专栏

vue-组件-组件化开发思想与组件注册-

文章目录

1、组件化开发思想
2、组件注册
3、组件命名
- 4、示例：
- ***后记*** ：

内容

1、组件化开发思想

标准：组件的定义要符合一定的规范
分治：根据功能的不同，定义不同的组件，组件之间相互不影响
重用：定义好的组件，可以重复使用。
组合：把各个组件组合起来，实现完整的功能或业务逻辑

2、组件注册

2.1、全局组件

语法：

  Vue.component(组件名称, {
  	data: 组件数据,
  	template: 组件模板内容
  })

2.2、局部组件

语法

  const 变量名(组件名) = {
  	data: 组件数据,
  	template: 模板内容
  }
  
  new Vue({
  	...
  	components: {
  		组件名: 变量名(组件名)
  	}
  	...
  })

解析：
- 当变量名和组件名相同时，可省略分号之后的内容

2.3、全局组件与局部组件的区别

全局组件可以作用于多个vue实例
局部组件只能作用于注册的那个vue实例

2.4、主键注册注意事项

data必须是个函数
组件模板只能有一个根元素
组件模板内容可以说模板字符串（ES6语法）

3、组件命名

这里讲解下多个单词的组件命名。

在组件注册的时候，可以用短横线或者驼峰命名

示例：

  Vue.component('MyCoponent', {})
  Vue.component('my-component', {})

在普通模板标签中，必须使用短横线连接
```
  <my-component>...</my-component>
```

在注册模板中两者都可以使用

  Vue.component('MyComponent1',{})
  Vue.component('my-component2',{
  	...
  	template: `<div>...<MyComponent1>...</MyComponnet1>...</div>`
  })

4、示例：

点击按钮，按钮显示数字自动加1

代码4-1

  <!DOCTYPE html>
  <html lang="zh-CN">
  <head>
  	<meta charset="UTF-8">
  	<meta name="viewport" content="width=device-width, initial-scale=1.0">
  	<title>01_register</title>
  	<script src="../assets/js/vue.js"></script>
  </head>
  <body>
  <div id="app">
  	<button-counter></button-counter>
  	<button-counter></button-counter>
  	<button-counter></button-counter>
  </div>

  <script>
  	Vue.component('ButtonCounter', {
  		data() {
  			return {
  				count: 0
  			}
  		},
  		methods: {
  			handle() {
  				this.count++
  			}
  		},
  		template: `<button @click="handle">点击了{{ count }}次</button>`
  	})
  	const app = new Vue({
  		el: '#app',
  		data: {

  		},
  		methods:{

  		}
  	 });
   </script>
  </body>
  </html>

效果图示4-1：

后记：

vue官网地址：https://cn.vuejs.org/

本项目为参考某马视频开发，相关视频及配套资料可自行度娘或者联系本人。上面为自己编写的开发文档，持续更新。欢迎交流，本人QQ:806797785

前端项目源代码地址：https://gitee.com/gaogzhen/vue
后端JAVA源代码地址:https://gitee.com/gaogzhen/JAVA

gaog2zh

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
vue-组件-组件化开发思想与组件注册

vue-组件-组件化开发思想与组件注册-目录文章目录1、组件化开发思想2、组件注册2.1、全局组件2.2、局部组件2.3、全局组件与局部组件的区别2.4、主键注册注意事项3、组件命名4、示例：***后记*** ：内容1、组件化开发思想标准：组件的定义要符合一定的规范分治：根据功能的不同，定义不同的组件，组件之间相互不影响重用：定义好的组件，可以重复使用。组合：把各个组件组合起来，实现完整的功能或业务逻辑2、组件注册2.1、全局组件语法： Vue.component
复制链接

扫一扫