甜橘子，专注成都网站制作网站设计与营销型网站建设与优化

QQ :532337155
电话：028-86922220
 
成都网站建设设计

将想法与焦点和您一起共享

总结Vue关于组件化开发知识点

这篇文章主要总结Vue关于组件化开发知识点，内容清晰明了，对此有兴趣的小伙伴可以学习一下，相信大家阅读完之后会有帮助。

创新互联-专业网站定制、快速模板网站建设、高性价比黔西南州网站开发、企业建站全套包干低至880元,成熟完善的模板库,直接使用。一站式黔西南州网站制作公司更省心,省钱,快速模板网站建设找我们，业务覆盖黔西南州地区。费用合理售后完善，十载实体公司更值得信赖。

全局组件注册

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

data 必须是一个函数

组件模板内容必须是单个根元素

组件模板内容可以是模板字符串

全局组件可以嵌套全局组件

组件命名方式

Vue.component('first-component', {/* .... */})
// 普通标签模板中不能使用驼峰, 只能在template中使用驼峰方式
Vue.component('firstComponent', {/* .... */})

局部组件注册

局部注册的组件只能在父组件中使用 ;

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}}
'
})

父组件通过属性将值传递给子组件

props 属性名规则

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

props 传递类型


 
  :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 }}
   

  

 `
})
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: `
  

   
   传值从第二个参数开始
	 
  

 `
})

父组件监听子组件事件


 
父组件

 
 
 

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)

组件插槽


 
 
程序错误

 
我是没有匹配的内容

 
 

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

   

    
   

   

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

   

    
   

  

 `
})

看完上述内容，是不是对总结Vue关于组件化开发知识点有进一步的了解，如果还想学习更多内容，欢迎关注创新互联行业资讯频道。


名称栏目：总结Vue关于组件化开发知识点
文章出自：http://chengdu.cdxwcx.cn/article/pjjspc.html

其他资讯