Vue关于组件化开发知识点详解

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

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

var vm = new Vue({
 components: {
  'hello-world': {
   data: function () {
    return {
     msg: 'hello world'
    }
   },
   template: '
{{ msg }}
'
  }
 }
})

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

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

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

   
    
   
   

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