Vue入门二：组件化开发-组件与实例

• 1、组件

组件指页面中的一部分

  
    
    
    
    
    
  
    

        

            
            提交
        
        

                     
            
        
    
    
    
  

• 2、组件与实例的关系

每一个组件也是一个vue的实例，实例拥有的属性和方法组件也有。父组件不定义模板是因为它把子组件当做模板。

  
    
    
    
    
    
  
    

        

            
            提交
        
        

                 
            
        
    
    
    
  

• 3、实组件通信：发布订阅模式

子组件与父组件通信才能实现子组件对父组件数据的操作，通过发布订阅来完成。

（1）父组件向子组件传值：props

//子组件：组件内部通过props接收传递过来的值
Vue.component('menu-item',{
        props:['postTitle'],
        template: '
{{title}}
'
})
//父组件
//①父组件通过属性将值传递给子组件 ；传入一个静态的值
post-title="来自父组件的数据">
//②建议使用v-bind进行绑定；dataTitle：父组件中的数据 ；动态赋予一个变量的值
post-title="dataTitle">

 引用官方文档的话：所有的 prop 都使得其父子 prop 之间形成了一个单向下行绑定：父级 prop 的更新会向下流动到子组件中，但是反过来则不行。这样会防止从子组件意外变更父级组件的状态，从而导致你的应用的数据流向难以理解。

注意：

①prop 命名规则 (camelCase vs kebab-case)：使用 DOM 中的模板时，camelCase (驼峰命名法) 的 prop 名需要使用其等价的 kebab-case (短横线分隔命名) 命名

②prop的类型：字符串，数值，布尔值，数组，对象

（2）子组件向父组件传值：

 引用官方文档的话：每次父级组件发生变更时，子组件中所有的 prop 都将会刷新为最新的值。这意味着你不应该在一个子组件内部改变 prop。如果你这样做了，Vue 会在浏览器的控制台中发出警告。

不推荐直接在子组件中直接更新父组件中的值。

//子组件中自定义事件：通过触发自定义事件(含参)，使用$emit
扩大字体

//父组件中监听:使用$event接收参数

  （3）非父子组件（即兄弟组件）传值：

分成以下三步：

①单独的事件中心管理组件间的通信；

var eventHub=new Vue()

②监听事件（在mounted钩子函数中）与销毁事件

//

add-todo

监听事件名称，addTodo方法
eventHub.$on('add-todo',addTodo)
eventHub.$off('add-todo')

③触发事件

//add-todo触发事件名称，addTodo方法
eventHub.$emit('add-todo',id)

• 4、插槽
  

 组件插槽的作用：父组件向子组件传递内容；

 插槽位置：

    Vue.component('menu-item',{
        template: `
            

            Error
            
            
           `
    })

 插槽内容：

插槽内容

 （1）具名插槽-即具有名字的插槽

 插槽内容：

  

  
A paragraph for the main content.
  
And another one.

  

（2）作用域插槽-父组件对子组件的内容进行加工处理

  插槽定义：

Vue.component('fruit-list', {
    props: ['list'],
    template: `
      

      

        
          {{ item.name }}
        
      
      
    `
})

 插槽内容：

• 5、实现todolist的删除功能

  
    
    
    
    
    
  
    

        

            
            提交