vue 开发-组件开发前必读

序言

关于vue 组件还是非常好用的, 真正掌握预计需要一段时间
具体可以参考 https://cn.vuejs.org/v2/guide/components-registration.html
本文主要是描写 组件开发 过程 必然会遇到的几个问题,
作为开发组件前的必读材料

1. template : 必须是单个根元素

必须写成

{{ title }}

不能写成

{{ title }}

2. data 必须是一个函数

data: function() {
		return {
			val: "",
			lay: 1,
			picker: null
		}
	}

组件注册有两种方法

var vue_mui_select={
... ...
}
//局部注册法:适用于多个组件同时加载到本地,使用时再实例化
	components: {
			'mui-select': vue_mui_select,
	}, 
					
//全局组件注册法,适用于使用一个组件就加载一个组件文件.js
Vue.component('mui-select', vue_mui_select);

3. 应用组件

1. 加载组件js文件
2. html中 vue el 对象访问内 使用组件
   
3. js 中 引用组件 this.$refs.img1

4. 命名

kebab-case 和 camelCase 名字

定义组件名的方式有两种：

使用 kebab-case 间隔符命名法
Vue.component('my-component-name', { /* ... */ })
当使用 kebab-case (短横线分隔命名) 定义一个组件时，你也必须在引用这个自定义元素时使用 kebab-case，例如 。

使用 PascalCase 驼峰命名法
Vue.component('MyComponentName', { /* ... */ })
当使用 PascalCase (首字母大写命名) 定义一个组件时，你在引用这个自定义元素时两种命名法都可以使用。也就是说 和 都是可接受的。注意，尽管如此，直接在 DOM (即非字符串的模板) 中使用时只有 kebab-case 是有效的。

HTML 中的特性名是大小写不敏感的，所以浏览器会把所有大写字符解释为小写字符。这意味着当你使用 DOM 中的模板时，camelCase (驼峰命名法) 的 prop 名需要使用其等价的 kebab-case (短横线分隔命名) 命名：

Vue.component('blog-post', {
  // 在 JavaScript 中是 camelCase 的
  props: ['postTitle'],
  template: '
{{ postTitle }}
'
})

事件名

v-on 事件监听器在 DOM 模板中会被自动转换为全小写 (因为 HTML 是大小写不敏感的)，所以就没有理由使用 camelCase 或 PascalCase 了

5. prop 单向数据流

在外部可以给组件的prop 属性赋值
但是 不能在组件内部改变prop值,
也不可以从外部获取prop改变后的值