zoukankan      html  css  js  c++  java
  • Vue学习计划基础笔记(六)

    组件基础

    目标:

    1. 掌握组件的构建方式
    2. 掌握如何复用组件、父子组件如何传值、如何向父组件发送消息
    3. 掌握如何通过插槽分发内容
    4. 了解解析dom模板时的注意事项
    5. 了解动态组件

    组件

    1. 组件理解起来大概上就和php的include一样, 也就是把页面分成几个部分(或文件).
    2. 组件就是把页面分成几块,每一块就是一个组件,组件使用起来就是引入,声明,使用.
    3. 很通俗的说,组件的使用就是自定义html标签的使用.

    组件的注册(定义)

    1.全局组件

    // (组件名, 配置)
    Vue.component('cpn-name',{
        data: function(){
            return {
                count: 0
            }
        }
        template: '<button @click="count++">{{count}}</button>'
    });
    

    2.局部组件

    ...
    components: {
        cpnName: {
            data: function(){
                return {
                    count: 0
                }
            }
            template: '<button @click="count++">{{count}}</button>'
        }
    };
    ...
    
    1. 单文件组件

    组件注意点

    1. 组件名的大小写
      定义的时候可以使用 my-component 或者 MyCompnent 这样的形式
      使用的时候因为html是大小写不敏感的, 在DOM(非字符串模版)中使用时只有my-component的形式是有效的.

    2. 组件的data必须是一个函数
      这个函数返回一个对象.
      至于为什么要是function(){return{..}}的形式, 那是因为这样每个实例可以维护一份被返回对象的独立的拷贝, 不然复用的时候会相互影响.

    3. 组件的复用
      组件在复用的时候,因为data的定义是return的对象,所以每用一次组件,就会有一个它的新 实例 被创建, 同样data也会是新的.

    4. 单个根元素
      在构建组件的时候,组件只能有一个根元素,如果组件内包含多个元素,根元素只能有一个.

    5. 组件的使用
      <my-component></my-component>这样使用就可以了
      (在单文件组件(Vue文件)中文档推荐使用<my-component/>这种写法,但是在HTML中文档不推荐使用<my-component/>这种写法,因为HTML并不支持自闭合的自定义元素)

    组件传递数据

    父组件 => 子组件 (通过prop)

    1. prop是组件上自定义的特性,在 父组件 使用子组件的时候加上. 可以在 子组件 注册的时候通过props0拿到这些prop值.
    2. 例子
    <blog-post title="Blogging with Vue"></blog-post>
    Vue.component('blog-post', {
      props: ['title'],
      template: '<h3>{{ title }}</h3>'
    })
    

    编译后:

    <h3>Blogging with Vue<h3>
    

    子组件 => 父组件 (通过$emit()发送事件传递参数)

    1. 在模版中使用普通的js事件来触发$emit(),
      $emit('my-event')是一个用来主动触发事件的方法,
      而这个'my-event'就是可以在 父组件 使用子组件的时候加上的,
      利用触发这个'my-event'可以触发父组件中的methods
      中间只要传递参数就可以实现传值了

    2. 例子

    Vue.component('blog-post', {
      props: ['post'],
      template: `
        <div class="blog-post">
          <h3>{{ post.title }}</h3>
            <button v-on:click="$emit('enlarge-text')">   <!-- 1.触发enlarge-text -->
            Enlarge text
            </button>
          <div v-html="post.content"></div>
        </div>
      `
    })
    
    <blog-post
      v-on:enlarge-text="postFontSize += 0.1"             <!-- 2.被触发enlarge-text然后执行对应操作 -->
    ></blog-post>
    

    组件插槽(slot)分发内容

    1. 一般来说,两个开闭标签之间是有内容的,那么如果在组件(自定义标签)开闭标签之间写入的内容的话会怎么样, slot就是用在接收的了, 只要在组件模版里面写上就可以接收了.

    2. 例子:

    Vue.component('alert-box', {
      template: `
        <div class="demo-alert-box">
          <strong>Error!</strong>
          <slot></slot>
        </div>
      `
    })
    
    <alert-box>这是错误</alert-box>
    

    编译后:

        <div class="demo-alert-box">
          <strong>Error!</strong>
          这是错误
        </div>
    

    动态组件

    1. 概括: 使用一个is特性(属性),来指定组件
    2. 也就是我们可以动态的去改变is的值, 然后实现动态的显示不同的组件
    3. 例子:
    <!-- 组件会在 `currentTabComponent` 改变时改变 -->
    <component v-bind:is="currentTabComponent"></component>
    

    解析DOM模版时的注意事项

    1. 在HTML标准中,有些元素是固定的嵌套的, 例如ul>li, ol>li,table, select, 假如要在这些标签内使用组件,就需要使用is来指定组件,不然就会报错.

    2. 例子:

    <!-- 报错 -->
    <table>
      <blog-post-row></blog-post-row>
    </table>
    <!-- 正确 -->
    <table>
      <tr is="blog-post-row"></tr>
    </table>
    
  • 相关阅读:
    linux内核中GNU C和标准C的区别
    linux内核中GNU C和标准C的区别
    Getting start with dbus in systemd (02)
    Getting start with dbus in systemd (01)
    Getting start with dbus in systemd (03)
    物理内存相关的三个数据结构
    数据类型对应字节数(32位,64位 int 占字节数)
    Linux kernel 内存
    共模电感的原理以及使用情况
    [原创]DC-DC输出端加电压会烧毁
  • 原文地址:https://www.cnblogs.com/chifung/p/9327912.html
Copyright © 2011-2022 走看看