全局组件注册全局组件注册
Vue.component('first-component', {
data: function () {

return {

count: 0

}
},
template: ''
})
Vue.component('first-component', {
data: function () {

return {

count: 0

}
},
template: ''
})data 必须是一个函数组件模板内容必须是单个根元素组件模板内容可以是模板字符串全局组件可以嵌套全局组件组件命名方式
Vue.component('first-component', {/* .... */})
// 普通标签模板中不能使用驼峰, 只能在template中使用驼峰方式
Vue.component('firstComponent', {/* .... */})

Vue.component('first-component', {/* .... */})
// 普通标签模板中不能使用驼峰, 只能在template中使用驼峰方式
Vue.component('firstComponent', {/* .... */})
局部组件注册局部组件注册局部注册的组件只能在父组件中使用 ;
var vm = new Vue({
components: {

'hello-world': {

data: function () {

return {

msg: 'hello world'

}

},

template: '
{{ msg }}
'

}
}
})
var vm = new Vue({
components: {

'hello-world': {

data: function () {

return {

msg: 'hello world'

}

},

template: '
{{ msg }}
'

}
}
})props 传递数据原则 : 单向数据流组件内部通过 props 接收传递过来的值
Vue.component('son-com', {

props: ['msg', 'parentMsg']

template: '
{{msg + "---" + parentMsg}}
'
})
Vue.component('son-com', {

props: ['msg', 'parentMsg']

template: '
{{msg + "---" + parentMsg}}
'
})父组件通过属性将值传递给子组件

props 属性名规则
props 属性名规则

在props中使用驼峰形式, 模板中需要使用短横线的形式 ; html 对大小写的不敏感的

字符串中没有这个限制


在props中使用驼峰形式, 模板中需要使用短横线的形式 ; html 对大小写的不敏感的字符串中没有这个限制

props 传递类型props 传递类型


:str="pstr"

:num="pnum"

:boolean="pboolean"

:arr="parr"

:obj="pobj"
>




:str="pstr"

:num="pnum"

:boolean="pboolean"

:arr="parr"

:obj="pobj"
>


Vue.component('son-com', {
props: ['str', 'num', 'boolean', 'arr', 'obj'],
template: `



{{ str }}


{{ num }}


{{ boolean }}




  • {{ item }}






{{ obj.name }}

{{ obj.age }}




`
})
Vue.component('son-com', {
props: ['str', 'num', 'boolean', 'arr', 'obj'],
template: `



{{ str }}


{{ num }}


{{ boolean }}




  • {{ item }}






{{ obj.name }}

{{ obj.age }}




`
})
var vm = new Vue({
el: '#app',
data: {

pstr: 'hello Vue',

pnum: 12,

pboolean: true,

parr: ['apple', 'banner', 'orange'],

pobj: {name: 'zs', age: 22}
}
})
var vm = new Vue({
el: '#app',
data: {

pstr: 'hello Vue',

pnum: 12,

pboolean: true,

parr: ['apple', 'banner', 'orange'],

pobj: {name: 'zs', age: 22}
}
})子组件向父组件传值
子组件向父组件传值子组件通过自定义事件向父组件传值 $emit()
Vue.component('son-com', {
template: `





传值从第二个参数开始




`
})
Vue.component('son-com', {
template: `





传值从第二个参数开始




`
})父组件监听子组件事件父组件监听子组件事件

父组件






父组件





var vm = new Vue({
el: '#app',
data: {

font: 10
},
methods: {

handle: function (val) {

this.font += 5

this.font += val // 此时的val就是 子组件传递过来的值

}
},
})
var vm = new Vue({
el: '#app',
data: {

font: 10
},
methods: {

handle: function (val) {

this.font += 5

this.font += val // 此时的val就是 子组件传递过来的值

}
},
})非父子组件传值
非父子组件传值单独的事件中心管理组件之间的通信
// 创建事件中心
var hub = new Vue()

// 在 mounted 中监听事件
hub.$on('eventName', fn)
hub.$off('eventName') // 销毁事件

// 在 methods 中处理事件
hub.$emit('eventName', param)
// 创建事件中心
var hub = new Vue()

// 在 mounted 中监听事件
hub.$on('eventName', fn)
hub.$off('eventName') // 销毁事件

// 在 methods 中处理事件
hub.$emit('eventName', param)组件插槽组件插槽


程序错误


我是没有匹配的内容






程序错误


我是没有匹配的内容




Vue.component('tmp-com', {
template: `











如果上面没有匹配到对应的标签就会展示默认内容












`
})
Vue.component('tmp-com', {
template: `











如果上面没有匹配到对应的标签就会展示默认内容












`
})