序言
关于vue 组件还是非常好用的, 真正掌握预计需要一段时间
具体可以参考 https://cn.vuejs.org/v2/guide/components-registration.html
本文主要是描写 组件开发 过程 必然会遇到的几个问题,
作为开发组件前的必读材料
1. template : 必须是单个根元素
必须写成
<div>
<h3>{{ title }}</h3>
<div v-html="content"></div>
</div>
不能写成
<h3>{{ title }}</h3>
<div v-html="content"></div>
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. 应用组件
- 加载组件js文件
- html中 vue el 对象访问内 使用组件
<mui-imgs ref=“img1” @img-change=“onImgChange”> - 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: '<h3>{{ postTitle }}</h3>'
})
<!-- 在 HTML 中是 kebab-case 的 -->
<blog-post post-title="hello!"></blog-post>
事件名
v-on 事件监听器在 DOM 模板中会被自动转换为全小写 (因为 HTML 是大小写不敏感的),所以就没有理由使用 camelCase 或 PascalCase 了
5. prop 单向数据流
在外部可以给组件的prop 属性赋值
但是 不能在组件内部改变prop值,
也不可以从外部获取prop改变后的值