首页 >> js开发 >> jsVue关于组件化开发知识点详解js大全
jsVue关于组件化开发知识点详解js大全
发布时间: 2021年1月13日 | 浏览:
| 分类:js开发
全局组件注册全局组件注册
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: '
}
}
})
var vm = new Vue({
components: {
'hello-world': {
data: function () {
return {
msg: 'hello world'
}
},
template: '
}
}
})props 传递数据原则 : 单向数据流组件内部通过 props 接收传递过来的值
Vue.component('son-com', {
props: ['msg', 'parentMsg']
template: '
})
Vue.component('son-com', {
props: ['msg', 'parentMsg']
template: '
})父组件通过属性将值传递给子组件
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: `
{{ obj.name }}
{{ obj.age }}
`
})
Vue.component('son-com', {
props: ['str', 'num', 'boolean', 'arr', 'obj'],
template: `
{{ 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: `
如果上面没有匹配到对应的标签就会展示默认内容
`
})
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中使用驼峰形式, 模板中需要使用短横线的形式 ; 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: `
如果上面没有匹配到对应的标签就会展示默认内容
`
})
相关文章:
- jsvuex中store存储store.commit和store.dispatch的用法js大全
- jsElement Input输入框的使用方法js大全
- jsJS使用Chrome浏览器实现调试线上代码js大全
- jsVue自动构建发布脚本的方法示例js大全
- js代码javascript递归函数定义和用法示例分析
- jsvue在响应头response中获取自定义headers操作js大全
- jsvue中全局路由守卫中替代this操作(this.$store/this.$vux)js大全
- js解决VUE自定义拖拽指令时 onmouseup 与 click事件冲突问题js大全
- js浅谈Vuex的this.$store.commit和在Vue项目中引用公共方法js大全
- js解决父组件将子组件作为弹窗调用只执行一次created的问题js大全