组件定义:
组件(Component)是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素,封装可重用的代码。在较高层面上,组件是自定义元素, Vue.js 的编译器为它添加特殊功能。
一、Vue组件分为两种:
1.全局组件
注意问题:全局组件一定要在Vue实例化之前创建
例:
Vue.component("my-comp", {//全局组件一定要在Vue实例化之前创建
template:"<h1>这是一个自定义组件的模板内容</h1>"
});
var vm = new Vue({
data:{
}
}).$mount("#app");
2.局部组件
局部组件,其实就是一个JSON对象
生成一个局部组件的方法:
2.1. 定义局部组件
2.2. 在实例中注册局部组件
例:
var UsersList = {
template:"<h2>这是一个局部组件,展示用户列表信息</h2>"
}
var vm = new Vue({
/*在实例中注册一个局部组件*/
components:{
"users-list":UsersList
}
}).$mount("#app");
二、组件中的数据:
组件可以有自己的数据 ,组件自己的数据定义在data选项中,data选项的对应的是一个【函数对象】,注意必须是函数对象。
var data = { counter: 0 }
Vue.component('simple-counter', {
template: '<button v-on:click="counter += 1">{{ counter }}</button>',
// 技术上 data 的确是一个函数了,因此 Vue 不会警告,
// 但是我们返回给每个组件的实例的却引用了同一个data对象
data: function () {
return data//由于data是一个地址,每次调用组件时,data对应的函数返回的都是相同的地址,因此这三个组件的数据就会同步变化。
}
})
new Vue({
el: '#example-2'
})
上面的实例,
由于这三个组件共享了同一个 data
, 因此增加一个 counter 会影响所有组件!这不对。我们可以通过为每个组件返回全新的 data 对象来解决这个问题:data: function () {
return {
counter: 0//每次调用组件,组件中的data函数都会被调用一次,由于data对应的是一个函数,因此,每次调用它时,返回的counter都有自己的内部状态(地址空间),因此这三个counter之间的数据不会相互影响
}
}
现在每个 counter 都有它自己内部的状态了:
三、父子组件之间传递数据的方法:
Vue中父子组件之间传递数据的强制单向性:即
>>> 允许父组件通过自定义属性给子组件传递数据
>>> 禁止子组件中直接修改父组件中的数据
解决这种单向性约束的方法:
父组件通过 props 向下传递数据给子组件,子组件通过events(自定义事件) 给父组件发送数据。
通过组件的自定义属性,将组件外部的数据传递给组件自己,这样子组建就可以父组件中的数据了。
自定义属性,通过props进行配置
自定义属性
通过props选项进行配置
项目中最常用的配置方式如下
props: {
属性名称: {
type:属性值的数据类型,//都有哪些数据类型
通常有String, Number, Boolean, Function, Object,
例:
Vue.component("welcome", {
/*props:["username"],properties 组件的自定义属性*/
props:{/*使用props定义组件的自定义属性,下面的定义方式,是项目中最常用的方式*/
username:{/*定义了一个自定义属性名称*/
type:String,/* type选项 设置这个自定义属性接收到数据的类型,也就是说设置了自定义属性的属性值的数据类型,因此如果接收到的外部数据和type中设置的类型不同时,浏览器会报错,但数据依然可以正常显示 */
default:function() {/*default选项,设置了这个属性的默认值 */
return "游客"
}
},
template:"<div><h2>尊敬的用户{{username}},欢迎访问系统,您的等级是{{level}}</h2>\
<input type='text' v-model='username'/></div>"
});
var vm = new Vue({
el:"#app",
data: {
parentName: "jerry"
}
});
Array
default:function() {
return 属性的默认值;
}
}
}
我们知道,父组件是使用 props 传递数据给子组件,但如果子组件要把数据传递回
去,应该怎样做?那就是自定义事件!