what is component
组件是Vue.js最强大的功能之一.组件可以扩展HTMl元素,封装可重用的代码.在较高层面上,组件是自定义元素,Vue.js的编译器为它添加特殊功能.在有些情况下,组件也可以是原生HTML元素的形式,以 'is' 特性扩展.
how to use
注册全局组件
Vue.component('kai', {
template: '<div>我是全局组件</div>'
})
var app = new Vue({
el: "#app"
})
一定要在初始化跟实例(app)之前注册组件,否则无效
注册完之后就可以在dom中跟html元素的使用方式一样的使用
<div id="app">
<kai></kai>
</div>
注册局部组件
var app = new Vue({
el: "#app",
components: {
"localCom": {
template: "<p>我系局部组件</p>"
}
}
})
- 通过使用组件实例选项(components)注册可以是组件仅在另一个实例/组件的作用域中可用
- 上边注册的组件 'localCom' 使用驼峰式命名,在使用时 要在每一个驼峰处使用 '-' 隔开
使用方式:
<div id="app">
<kai></kai>
<local-com></local-com>
</div>
is特性
由于Vue只有在浏览器解析和标准化HTML后才能获取模板内容.比如<ul>中只可以直接包裹<li>所以当你像下边这样使用组件
<ul>
<my-component></my-component>
</ul>
浏览器会在Vue解析模板之前,标准化HTML,就会导致一些问题
变通的方案是使用特殊的 is 属性:
<ul>
<li is="my-component"></li>
</ul>
data 必须是函数
在自定义组件中data选项必须是函数,其实不难理解,如果你像Vue跟实例那样,在自定义组件中也直接使用对象的形式,那么如果这个组件被多个地方使用,而data是一个对象,在内存中就是同一个内存空间,那如果在某一个地方修改data中的内容,那其他的地方的组件数据也会一起改变,显然是不合理的,所以data要是一个函数,然后返回一个对象.
Vue.component("my-component", {
template: "<span>{{message}}</span>"
data: function () {
return {
message: "我是自定义全局组件"
}
}
}
)
组件间通讯
在Vue中,父子组件的关系可以总结为 props down, events up, 父组件通过props向下传递数据给子组件,子组件通过events给父组件发送消息.看下图
image.png
1. 父 -> 子
组件实例的作用域是孤立的.这意味着不能(也不应该)在子组件的模板内直接 引用父组件的数据.要让子组件使用粗组件的数据,我们需要这样做:
<div id="app">
<kai msg="niguanwo"></kai>
<local-com></local-com>
</div>
Vue.component('kai', {
template: '<div>我是全局组件{{msg}}</div>',
props: ["msg"]
});
- HTMl特性是不区分大小写的,所以当使用的不是字符串模板, 驼峰式命名的 prop 需要转换为相对应的 短横线隔开式命名
2.动态绑定props
<div id="app">
<input type="text" v-model="time">
<kai msg="niguanwo" v-bind:timer="time"></kai>
<local-com></local-com>
</div>
<script src="./vue.js"></script>
<script>
// 注册全局组件
Vue.component('kai', {
template: '<div>我是全局组件{{msg}}时间{{timer}}</div>',
props: ["msg", "timer"]
});
var app = new Vue({
el: "#app",
components: {
"localCom": {
template: "<p>我系局部组件</p>"
}
},
data: {
time: "jidianl"
}
})
</script>
- 这样,父组件你的time只要变化,子组件的timer也会动态的跟着改变
3.还可以直接传递一个对象,写法如下
<div id="app">
<input type="text" v-model="time">
<kai v-bind="obj" v-bind:object="obj1"></kai>
<local-com></local-com>
</div>
<script src="./vue.js"></script>
<script>
// 注册全局组件
Vue.component('kai', {
template: '<div>{{name}}{{age}}{{object.status}}{{object.year}}</div>',
props: ["name", "age", "object"]
});
var app = new Vue({
el: "#app",
data: {
obj: {
name: "kai",
age: 25
},
obj1: {
status: "ok",
year: "2017"
}
}
})
</script>
- 还是要在props显示地写出要接收的属性的名称,直接使用 v-bind="obj"
4.单向数据流
prop 是单向绑定的：当父组件的属性变化时，将传导给子组件，但是不会反过来。另外，每次父组件更新时，子组件的所有 prop 都会更新为最新值。这意味着你不应该在子组件内部改变 prop。
如果需要修改使用下面两种方式:
1. 定义一个局部变量，并用 prop 的值初始化它：
props: ['initialCounter'],
data: function () {
return { counter: this.initialCounter }
}
-
定义一个计算属性，处理 prop 的值并返回。
props: ['size'], computed: { normalizedSize: function () { return this.size.trim().toLowerCase() } }
5.非props特性
- 所谓非prop特性,就是它可以直接传入组件,而不需要定义相应的prop.
<bs-date-input data-3d-date-picker="true"></bs-date-input>
上边这个会直接在bs-date-input的组件内添加一个data-3d-date-picker的值为true不过需要在data返回的对象中声明一个data-3d-date-picker属性,并初始化一个默认值出来
6.替换/覆盖现有的特性
- 对于多数特性来说，传递给组件的值会覆盖组件本身设定的值。即例如传递 type="large" 将会覆盖 type="date" 且有可能破坏该组件！所幸我们对待 class 和 style 特性会更聪明一些，这两个特性的值都会做合并操作,生成最终的值.
子 -> 父
1. 使用v-on绑定自定义事件
image.png
- v-on:aaa 也可简写成 @aaa
- 父组件可以在使用子组件的地方直接用 v-on 来监听子组件触发的事件。
2. 给组件绑定原生事件
<my-component v-on:click.native="doTheThing"></my-component>
- v-on:click.native 会监听组件所在的根实例的(app)doTheThing事件
3. sync 实现子父组件数据同步
image.png
4.其他
- 尽管有 props 和 events，但是有时仍然需要在 JavaScript 中直接访问子组件。为此可以使用 ref 为子组件指定一个索引 ID。|
<div id="parent">
<user-profile ref="profile"></user-profile>
</div>
var parent = new Vue({ el: '#parent' })
// 访问子组件
var child = parent.$refs.profile
网友评论