VueJS组件篇

首先介绍一下什么是组件

组件可以扩展HTML元素，封装可重用的代码。
组件是自定义元素，VueJS的编译器为它添加特殊功能。
组件也可以是原生HTML元素形式，以is特性扩展。

如何使用组件

这里我先介绍两种注册组件的方法

全局注册（所谓全局注册就是使用Vue的静态注册）

    Vue.component('my-component',{
        template:'我是全局注册'
    });
    new Vue({
        el:"#app",
    });

局部注册（需要写在实例中的components属性中）

  var vm = new Vue({
      el:'#app',
      components:{
          'my-component':{
              template：'我是局部注册'
          }
      }
  });
  new Vue({
      el:"#app",
  });

组件中的data

data必须是函数

如果不是函数，每个组件共享一个数据，会相互影响

当使用函数的时候，把数据返回，每个组件都有自己的数据

  Vue.component('my-component',{
      template:'{{ name }}'
      data(){
          return{
              name:'luoxue'
          }
      }
  })

组件的构成

组件意味着协同工作，通常父子组件会是这样的关系：组件 A 在它的模版中使用了组件 B 。它们之间必然需要相互通信：父组件要给子组件传递数据，子组件需要将它内部发生的事情告知给父组件。然而，在一个良好定义的接口中尽可能将父子组件解耦是很重要的。这保证了每个组件可以在相对隔离的环境中书写和理解，也大幅提高了组件的可维护性和可重用性。

在 Vue.js 中，父子组件的关系可以总结为 props down, events up 。父组件通过 props 向下传递数据给子组件，子组件通过 events 给父组件发送消息。

prop 是父组件用来传递数据的一个自定义属性。子组件需要显式地用 props 选项声明 “prop”：

组件中的props属性

由于组件中的data是一个函数，拥有自己的作用域，所以不能直接传值，我们就需要用props属性来进行数据的传递。也就是说，组件实例的作用域是孤立的。这意味着不能并且不应该在子组件的模板内直接引用父组件的数据。可以使用 props 把数据传给子组件。

//传入普通字符串


Vue.component('child',{
    // 声明props
    props:['message'],
    // 就像 data 一样，prop 可以用在模板内
    // 同样也可以在 vm 实例中像 “this.message” 这样使用
    template: '{{ message }}'
})
new Vue({
    el:"#app",
})

camelCase vs. kebab-case

HTML 特性不区分大小写。当使用非字符串模版时，prop的名字形式会从 camelCase 转为 kebab-case（短横线隔开）：

Vue.component('child', {
  // camelCase in JavaScript
  props: ['myMessage'],
  template: '{{ myMessage }}'
})

再次说明，如果你使用字符串模版，不用在意这些限制。

动态Prop

类似于用 v-bind 绑定 HTML 特性到一个表达式，也可以用 v-bind 动态绑定 props 的值到父组件的数据中。每当父组件的数据变化时，该变化也会传导给子组件：

html代码

js代码

Vue.component('child',{
        // 声明props
        props:['myMessage'],
        // 就像 data 一样，prop 可以用在模板内
        // 同样也可以在 vm 实例中像 “this.message” 这样使用
        template: '{{ myMessage }}'
    })
    new Vue({
        el:"#app",
        data:{
            name:"luoxue"
        }
    })

字面量语法 VS 动态语法

html:如果在为vue组件prop定义或者赋值的时候用了“v-bind:”的动态语法，则会先将其转化为js表达式，然后计算结果赋值，下面示例中，第一个传递的是字符串，第二个传递的是1+2即3的数值

#字面量语法 VS 动态语法

单项数据流

prop 是单向绑定的：当父组件的属性变化时，将传导给子组件，但是不会反过来。这是为了防止子组件无意修改了父组件的状态——这会让应用的数据流难以理解。

另外，每次父组件更新时，子组件的所有 prop 都会更新为最新值。这意味着你不应该在子组件内部改变 prop 。如果你这么做了，Vue 会在控制台给出警告。
通常有两种改变 prop 的情况：

prop 作为初始值传入，子组件之后只是将它的初始值作为本地数据的初始值使用；
prop 作为需要被转变的原始值传入。

单项数据流 VS 双向数据流

Prop类型绑定（单向、双向）

    
        vue实例：
        
    
    

    
        component组件（默认）：
        
        component组件（once）：
        
        component组件（sync）：

Prop验证（转）

组件可以为 props 指定验证要求。如果未指定验证要求，Vue 会发出警告。当组件给其他人使用时这很有用。

prop 是一个对象而不是字符串数组时，它包含验证要求：

#Prop验证

    
        
            name:{{dr.name}}, age:{{dr.age}}.
        
    
    
        
    



//Prop验证
Vue.component("child06", {
    props: {
        //基础类型检测("null"意思是任何类型都可以)
        msg_null: null,
        //String类型，必须是定义过的，可以是空字符串""
        msg_string: {
            type: String,
            required: true,
        },
        //Number类型，默认值100
        msg_number: {
            type: Number,
            default: 100,
        },
        //Object类型，返回值必须是js对象
        msg_obj: {
            type: Object,
            default: function() {
                return {
                    name: "DarkRanger",
                    age: "18",
                }
            }
        },
        //指定这个prop为双向绑定
        //如果绑定类型不对将抛出一条警告
        msg_twoway: {
            type: String,
            twoWay: true,
        },
        //自定义验证，必须是Number类型，验证规则：大于0
        msg_validate: {
            type: Number,
            validator: function(val) {
                return val > 0;
            }
        },
        //将值转为String类型
        //在设置值之前转换值(1.0.12+)
        msg_number2string: {
            coerce: function(val) {
                return val + ""
            }
        },
        //js对象转JSON字符串
        msg_obj2json: {
            coerce: function(obj) {
                return JSON.stringify(obj);
            }
        },
        //JSON转js对象
        msg_json2obj: {
            coerce: function(val) {
                return JSON.parse(val);
            }
        },
    },
    template: 'msg_null: {{msg_null}}' 
　　　　+ 'msg_string:{{msg_string}}' 
　　　　+ 'msg_number: {{msg_number}}' 
　　　　+ 'msg_obj:{{"name-->"+msg_obj.name+", age-->"+msg_obj.age}}' 
　　　　+ 'msg_twoway:' 
　　　　+ 'msg_validate:{{msg_validate}}' 
　　　　+ 'msg_number2String: {{msg_number2string}}' 
　　　　+ 'msg_obj2json: {{msg_obj2json}}'
　　　　+'msg_json2obj:{{"name: "+msg_json2obj.name+"; age: "+msg_json2obj.age}}'
});
var dr06 = new Vue({
    el: "#dr06",
    data: {
        telphone: "0356-1234567",
        mobilephone: 15912345678,
        dr: {
            name: "DarkRanger",
            age: 25
        },
        drJson: '{"name":"DarkRanger","age":25}',
    }
})

动态组件的tab切换

动态组件


   



    
    
        
            {{tab01Text}}
            {{tab02Text}}
            {{tab03Text}}

使用slot分发内容

单个slot

除非子组件模板包含至少一个插口，否则父组件的内容将会被丢弃。当子组件模板只有一个没有属性的 slot 时，父组件整个内容片段将插入到 slot 所在的 DOM 位置，并替换掉 slot 标签本身。

最初在标签中的任何内容都被视为备用内容。备用内容在子组件的作用域内编译，并且只有在宿主元素为空，且没有要插入的内容时才显示备用内容。

#单个slot



    
    


    
        这里有新的内容01
        这里有新的内容02

具名slot

元素可以用一个特殊的属性 name 来配置如何分发内容。多个 slot 可以有不同的名字。具名 slot 将匹配内容片段中有对应 slot 特性的元素。

仍然可以有一个匿名 slot ，它是默认 slot ，作为找不到匹配的内容片段的备用插槽。如果没有默认的 slot ，这些找不到匹配的内容片段将被抛弃。

#具名Slot（有名称的slot）



    
        this is slot01
        this is slot02
        this is a simple div01
        this is a simple div02

编译作用域

作用域插槽是一种特殊类型的插槽，用作使用一个（能够传递数据到）可重用模板替换已渲染元素。

当组件中拥有了slot插口的时候，组件内的内容片断都将替换掉slot

在子组件中，只需将数据传递到插槽，就像你将 prop 传递给组件一样：

编译作用域


    
        {{msg01}}
        {{msg02}}
        {{msg03}}

VueJS组件篇

{{ name }}

#字面量语法 VS 动态语法

Prop类型绑定（单向、双向）

#Prop验证

动态组件

#单个slot

#具名Slot（有名称的slot）

编译作用域

你可能感兴趣的:(VueJS组件篇)