vue.js---组件

组件的作用

作用: 提高代码的可复用性。

组件的使用方法

  1. 全局注册:
  • 形式
Vue.component(tag,{
template:'
' })
  • 代码示例:
  • 优点:所有的Vue示例都可以使用。
  • 缺点:权限太大,容错率降低。
  1. 局部注册:
  • 代码示例:

  1. html标签限制

vue组件的模板在某些情况下会受到html标签的限制,比如

中只能有 ,
这些元素,所以直接在table中使用组件是无效的,此时可以使用is属性来挂载组件。

  • 代码示例:

组件是使用技巧----奇淫技巧

  1. 推荐使用小写字母加-­进行命名(必须) 。child, my-­componnet命名组件

  2. template中的内容必须被一个DOM元素包括 ,也可以嵌套

  3. 在组件的定义中,除了template之外,还可以使用其他选项:data,computed,methods

  4. 在组件中使用data必须是一个方法。

  5. 代码示例:解决点击一个按钮,两个都进行加的操作


    

使用props传递数据 (父亲向儿子传递数据)

  1. 在组件中使用props来从父亲组件接收参数,注意,在props中定义的属性,都可以在组件中直接使用

  2. propps的数据来自父级,而组件中data 中return的数据就是组件自己的数据,两种情况作用域就是组件本身,因此这两种属性都可以在template,computed,methods中直接使用。

  3. props的值有两种,一种是字符串数组,一种是对象

  4. 可以使用v-­bind动态绑定父组件来的内容

  5. 代码示例:


在父组件向子组件传递消息:

我是父组件
确定要传递的数据:(使用v-bind与否的区别) 不使用:msg的时候,msg默认传入的是字符串 //msg.length = 7 加了:msg,对传入的数据会进行自动识别 //msg.length = 3
v-bind动态的传递数据---把input中parentmsg传递给子组件:

单向数据流

  • 单向数据流含义 : 通过props传递数据是单向的了, 也就是父组件数据变化时会传递给子组件,但是反过来不行。

  • 目的 :是尽可能将父子组件解稿,避免子组件无意中修改了父组件的状态。

  • 应用场景: 业务中会经常遇到两种需要改变 props 的情况

  1. 一种是父组件传递初始值进来,子组件将它作为初始值保存起来,在自己的作用域下可以随意使用和修改。这种情况可以在组件 data 内再声明一个数据,引用父组件的 prop
    步骤一:注册组件
    步骤二:将父组件的数据传递进来,并在子组件中用props接收
    步骤三:将传递进来的数据通过初始值保存起来

  1. 另一种情况就是 prop 作为需要被转变的原始值传入。这种情况用计算属性就可以了
    步骤一:注册组件
    步骤二:将父组件的数据传递进来,并在子组件中用props接收
    步骤三:将传递进来的数据通过计算属性进行重新计算

传递的width仅仅是一个数据

数据验证

vue组件中camelCased (驼峰式) 命名与 kebab­case(短横线命名)

  • 在html中, myMessagemymessage是一致的,在组件中的html中使用必须使用kebab-­case(短横线)命名方式。在html中不允许使用驼峰!!!

  • 在组件中, 父组件给子组件传递数据必须用短横线。在template中,必须使用驼峰命名方式,若为短横线的命名方式。则会直接保错。

  • 在组件的data中,用this.XXX引用时,只能是驼峰命名方式。若为短横线的命名方式,则会报错。

验证的 type 类型可以是:
• String
• Number
• Boolean
• Object
• Array
• Function

  • 相关代码示例:
    Vue.component('type-component',{
      //props中堆数据进行限定,必须使用对象
        props: {
          //限定a传入的数据必须是string
          a: String,
            //限定b传入的数据可以是string也可以是Number
            b: [String,Number],
            //c是布尔类型,默认值是true。既要指定默认值又要指定类型,就使用对象type--required--default
            c:{
            type:Boolean,
                default: true
            },
            //穿入的是数字,而且是必须传入
            d: {
            type: Number,
                required: true
            },
            //如果是数组或对象,默认值必须是一个函数来返回
            e: {
            type: Array,
                default: function(){
                  //如果不向子组件传递e,默认取值333
                  return [333];
                }
            },
            //自定义一个验证函数
            f: {
            validator: function(value){
              //value就是传入的值88,<10就会报错
              return value > 10
            }
            },
            //定义一个function
            g: {
            type:Function
            }
        },
        template:'
{{a}}---{{b}}--{{c}}--{{d}}--{{e}}--{{f}--{{g}}
' });

组件通信

组件关系可分为父子组件通信、兄弟组件通信、跨级组件通信

自定义事件—子组件给父组件传递数据

使用v­-on 除了监昕 DOM 事件外,还可以用于组件之间的自定义事件。

  • JavaScript 的设计模式 一一观察者模式, dispatchEventaddEventListener这两个方法。 Vue 组件也有与之类似的一套模式,子组件用$emit()来 触发事件 ,父组件用
    $on()来 监昕子组件的事件 。

  • 代码示例:
    第一步:自定义事件
    第二步: 在子组件中用$emit触发事件,第一个参数是事件名,后边的参数是要传递的数据
    第三步:在自定义事件中用一个参数来接受

您现在的银行卡余额是:{{total}} //在父组件的作用域中定义一个自定义事件

在组件中使用v-model

  • $emit的代码,这行代码实际上会触发一个input事件, input后的参数就是传递给v­model绑定的属性的值.
  • v­-model 其实是一个语法糖,这背后其实做了两个操作
    1. v-­bind 绑定一个 value属性
    2. v-­on 指令给当前元素绑定 input 事件
  • 要使用v­-model,要做到:

    1. 接收一个 value 属性。
    2. 在有新的 value 时触发input 事件
  • 具体代码示例

您现在的银行卡余额是:{{total}} v-model其实就是绑定了input事件,当触发input时候,input事件就会自动接收传递过来的参数,并赋值给已经绑定的total。

非父组件之间的通信

image.png
  • 代码示例:

  • 父链:this.$parent
Vue.component('child-component',{
    template: '',
      methods: {
      setFatherData:function(){
        this.$parent.msg = '数据已经修改了'
      }
      }
  });
  • 子链:this.$refs

提供了为子组件提供索引的方法,用特殊的属性ref为其增加一个索引

    
    
      
    var app = new Vue({
        el: '#app',
        data: {
          //bus中介
            bus: new Vue(),
            msg: '数据还未修改',
            formchild: '还未拿到'
        },
        methods: {
          getChildData: function(){
            //用来拿子组件中的内容
              this.formchild = this.$refs.a.msg;
          }
        }

    })

什么是slot(插槽)

为了让组件可以组合,我们需要一种方式来混合父组件的内容与子组件自己的模板。这个过程被称为内容分发。Vue.js 实现了一个内容分发 API,使用特殊的 slot 元素作为原始内容的插槽。

编译的作用域

在深入内容分发 API 之前,我们先明确内容在哪个作用域里编译。假定模板为:\


{{ message }}

message 应该绑定到父组件的数据,还是绑定到子组件的数据?答案是父组件。

组件作用域简单地说是:

  1. 父组件模板的内容在父组件作用域内编译;

    内的是父组件的作用域。

  2. 子组件模板的内容在子组件作用域内编译,template中的是子组件的作用域。

插槽的用法

父组件的内容与子组件相混合,从而弥补了视图的不足

混合父组件的内容与子组件自己的模板

  • 单个插槽:

//在子组件中渲染出父组件的内容,sort中的内容会替换成p中的内容

我是父组件插入的内容

  • 具名插槽:
    根据不同的视图和div使用不同的插槽

我是标题

我是正文内容

我是正文内容有两段

我是底部信息

作用域插槽

主要作用: 从子组件中获取数据。

作用域插槽是一种特殊的slot,使用一个可以复用的模板来替换已经渲染的元素
-------slot-scope
====template模板是不会被渲染的。sort替换的是template里面的内容。
——从子组件获取数据


------vue2.5.0之后的写法:

{{prop.text}} {{prop.ss}}

访问slot

通过this.$slots.(NAME)

Vue.component('my-component',{
template:'
', mounted:function(){ //访问插槽,拿到的是虚拟节点VNde var header = this.$slots.header; var text = header[0].elm.innerText; var html = header[0].elm.innerHTML; console.log(header); console.log(text); console.log(html) } })

组件高级用法---动态组件

  1. VUE给我们提供 了一个元素叫component

  2. 作用: 用来动态的挂载不同的组件

  3. 实现:使用is特性来进行实现的

  4. 具体代码实现:


你可能感兴趣的:(vue.js---组件)