Vue 组件

组件是可复用的 Vue 实例，且带有一个名字

• 组件也是一个 vue 实例，可以传入和 vue 一样的属性
• 实例一个组件，这里只是定义一个组件，还没有再全局或者 vue 实例中注册，还不能去使用它

       //1. 创建组件构造器
        let Profile = Vue.extend({
            //1.1 模板选项
            template : `
                

                    
                    
今天心情不错!
                
            `
        });

或者在 html 页面中用 template 或者 script 便签定义一个模板

• 全局注册组件：这里全局注册的组件可以在页面上所有的vue实例中去使用

//  注册全局组件
Vue.component('mytemplate',Profile);

使用：以组件名称为一对标签的写入 vue 实例控制的界面即可

• 局部注册组件：在 vue 实例的 components 属性中注册局部组件，局部组件只能在对应 vue 实例控制的区域内使用

 //1. 创建Vue的实例
    let vm = new Vue({
        el : '#app',
        data : {
            message : ''
        },
        methods : {
            //实例的所有函数实现
        },
        components : {
            //注册局部组件，只能在这个vue实例内部使用
            'mytemplate' : Profile
        }
    });

• 父子组件间传值问题，通过一个 TodoList 案例来解释，要求：在文本框中输入 Todo 添加到 list 中，点击 list 删除对应项，涉及到子组件向父组件传值和父组件向子组件传值

    
    
    
    
    



    

        
        提交
        

            
            
        
    
    

子组件向父组件传值，用事件调用的方式，父组件向子组件传值用属性绑定的方式。

• 属性绑定：可以实现父组件向子组件传值，在做属性绑定时，一定要在子组件中的 props中去定义这个属性，子组件才可以使用在子组件中，也可以对父组件传的值做一定的校验

// 可以将 props 属性写成一个对象
props：{
  // 属性名 
  content : {
    type: String, // 规定接收属性的类型，如果要接收多个属性，可以写成一个数组
    required : Boolean, // 是否为必填，如果为 true 并且父组件没有传值则会报一个警告，默认是 false 
    default : defaultValue, // 默认值
    validator : function (value) {
      // 接收 属性的 value 值，可以对 value 进行验证，放回 true 表示通过验证， false 表示验证失败
     } 
  }
}

• 事件调用：在子组件中调用this.$emit('父组件自定义函数名',若干参数)的方式触发父组件自定义函数中对用的父级函数，来达到子组件向父组件传递值的目的(函数调用时的参数传递)
• 非父子组件间传值

• 如果我们在组件标签上想去触发一个原生 DOM 事件，直接写是不生效的

  
 
 
 
  
假如涉及到了复杂的组件间的传值问题，可以考虑使用 vuex 
 
  
插槽的使用：如果我们需要由父组件向子组件里面传一段 html 代码，显然是不好取用属性绑定的方式，这里我们用插槽
 
 
 
 

        
            
            
            

              
              
鞠婧炜
            
        
    
    
 
 
 
  
组件向插槽传值，也是通过属性绑定的方式