vue组件三大核心概念

前言

本文主要介绍属性、事件和插槽这三个vue基础概念、使用方法及其容易被忽略的一些重要细节。如果你阅读别人写的组件，也可以从这三个部分展开，它们可以帮助你快速了解一个组件的所有功能。

一、属性

1.自定义属性props

prop 定义了这个组件有哪些可配置的属性，组件的核心功能也都是它来确定的。写通用组件时，props 最好用对象的写法，这样可以针对每个属性设置类型、默认值或自定义校验属性的值，这点在组件开发中很重要，然而很多人却忽视，直接使用 props 的数组用法，这样的组件往往是不严谨的。

// 父组件
<props name='属性'
    :type='type'
    :is-visible="false"
    :on-change="handlePropChange"
    :list=[22, 33, 44]
    title="属性Demo"
    class="test1"
    :class="['test2']"
    :style="{ marginTop: '20px' }" //注意:style 的优先级是要高于 style
    style="margin-top: 10px" 
</props>

// 子组件
props: {
    name: String,
        type: {
        //从父级传入的 type，它的值必须是指定的 'success', 'warning', 'danger'中的一个，如果传入这三个以外的值，都会抛出一条警告
        validator: (value) => {
            return ['success', 'warning', 'danger'].includes(value)
        }
    },
    onChange: {
        //对于接收的数据，可以是各种数据类型，同样也可以传递一个函数
        type: Function,
      default: () => { }
    },
    isVisible: {
        type: Boolean,
      default: false
    },
    list: {
        type: Array,
      // 对象或数组默认值必须从一个工厂函数获取
      default: () => []
    }
}

从上面的例中，可以得出props可以显示定义一个或一个以上的数据，对于接收的数据，可以是各种数据类型，同样也可以传递一个函数。通过一般属性实现父向子通信；通过函数属性实现子向父通信。

2.inheritAttrs

这是2.4.0新增的一个API，默认情况下父作用域的不被认作 props 的特性绑定将会回退且作为普通的HTML特性应用在子组件的根元素上。可通过设置 inheritAttrs 为 false，这些默认行为将会被去掉。注意：这个选项不影响class和 style绑定。
上个例中，title属性没有在子组件中props中声明，就会默认挂在子组件的根元素上，如下图所示：

3. data与props区别

  • 相同点

两者选项里都可以存放各种类型的数据，当行为操作改变时，所有行为操作所用到和模板所渲染的数据同时都会发生同步变化。

  • 不同点

data 被称之为动态数据，在各自实例中，在任何情况下，我们都可以随意改变它的数据类型和数据结构，不会被任何环境所影响。

props 被称之为静态数据，在各自实例中，一旦在初始化被定义好类型时，基于 Vue 是单向数据流，在数据传递时始终不能改变它的数据类型，而且不允许在子组件中直接操作 传递过来的props数据，而是需要通过别的手段，改变传递源中的数据。至于如何改变，我们接下去详细介绍：

4.单向数据流

这个概念出现在组件通信。props的数据都是通过父组件或者更高层级的组件数据或者字面量的方式进行传递的，不允许直接操作改变各自实例中的props数据，而是需要通过别的手段，改变传递源中的数据。那如果有时候我们想修改传递过来的prop,有哪些办法呢？

  • 方法1：过渡到 data 选项中

在子组件的 data 中拷贝一份 prop，data 是可以修改的

export default {
    props: {
        type: String
    },
    data() {
        return {
            currentType: this.type
        }
    }
}

在 data 选项里通过currentType接收 props中type数据，相当于对 currentType= type进行一个赋值操作，不仅拿到了 currentType的数据，而且也可以改变currentType数据。

  • 方法2：利用计算属性
export default {
    props: {
        type: String
    },
    computed: {
        normalizedType: function () {
            return this.type.toUpperCase();
        }
    }
}

以上两种方法虽可以在子组件间接修改props的值，但如果子组件想修改数据并且同步更新到父组件，却无济于事。在一些情况下，我们可能会需要对一个prop进行 双向绑定，此时就推荐以下这两种方法：

// 父组件
<template>
    <div class="hello">
        <div>
            <p>父组件msg：{{ msg }}</p>
            <p>父组件数组：{{ arr }}</p>
        </div>
        <button @click="show = true">打开model框</button>
        <br/>
        <demo :show.sync="show" :msg.sync="msg" :arr="arr"></demo>
    </div>
</template>

<script>
import Demo from "./demo.vue"
export default {
    name: "Hello",
    components: {
        Demo
    },
    data() {
        return {
        show: false,
        msg: "模拟一个model框",
        arr: [1, 2, 3]
        }
    }
}
</script>

// 子组件
<template>
    <div v-if="show" class="border">
        <div>子组件msg：{{ msg }}</div>
        <div>子组件数组：{{ arr }}</div>
        <button @click="closeModel">关闭model框</button>
        <button @click="$emit('update:msg', '做梦跳绳闪到腰')">
        改变文字
        </button>
        <button @click="arr.push('前端小胖')">改变数组</button> 
    </div>
</template>
<script>
export default {
    props: {
        msg: {
            type: String
        },
        show: {
            type: Boolean
        },
        arr: {
            type: Array //在子组件中改变传递过来数组将会影响到父组件的状态
        }
    },
    methods: {
        closeModel() {
            this.$emit("update:show", false)
        }
    }
}

二、事件

1.事件驱动与数据驱动

用原生JavaScript事件驱动通常是这样的流程：

  • 先通过特定的选择器查找到需要操作的节点->给节点添加相应的事件监听
  • 然后用户执行某事件（点击，输入，后退等等）-> 调用 JavaScript来修改节点

这种模式对业务来说是没有什么问题，但是从开发成本和效率来说会比较不理想，特别是在业务系统越来越庞大的时候。另一方面，找节点和修改节点这件事，效率本身就很低，因此出现了数据驱动模式。

Vue的一个核心思想是数据驱动。所谓数据驱动，是指视图是由数据驱动生成的，我们对视图的修改，不会直接操作 DOM，而是通过修改数据,其流程如下：

用户执行某个操作 -> 反馈到VM 处理（可以导致 Model 变动）-> VM 层改变，通过绑定关系直接更新页面对应位置的数据

可以简单地理解：数据驱动不是操作节点的，而是通过虚拟的抽象数据层来直接更新页面。主要就是因为这一点，数据驱动框架才得以有较快的运行速度（因为不需要去折腾节点），并且可以应用到大型项目。

2.修饰符事件

Vue事件分为普通事件和修饰符事件，这里我们主要介绍修饰符事件。

Vue 提供了大量的修饰符封装了这些过滤和判断，让开发者少写代码，把时间都投入的业务、逻辑上，只需要通过一个修饰符去调用。我们先来思考这样问题：怎样给这个自定义组件 custom-component 绑定一个原生的 click 事件？

<custom-component>组件内容</custom-component>

如果你的回答是<custom-component @click="xxx">，那就错了。这里的 @click 是自定义事件click，并不是原生事件 click。绑定原生的 click 是这样的：

<custom-component @click.native="xxx">组件内容</custom-component>

实际开发过程中离不开事件修饰符，常见事件修饰符有以下这些：

  • 表单修饰符
    1. lazy
    在默认情况下，v-model 在每次 input 事件触发后将输入框的值与数据进行同步 。你可以添加lazy修饰符，从而转变为使用 change事件进行同步。适用于输入完所有内容后，光标离开才更新视图的场景。
    2. trim
    如果要自动过滤用户输入的首尾空白字符，可以给 v-model 添加 trim 修饰符：
<input v-model.trim="msg">

这个修饰符可以过滤掉输入完密码不小心多敲了一下空格的场景。需要注意的是，它只能过滤首尾的空格！首尾，中间的是不会过滤的。
3. number
如果想自动将用户的输入值转为数值类型，可以给 v-model 添加 number 修饰符:

<input v-model.number="value" type="text" />

从上面例子，可以得到如果你先输入数字，那它就会限制你输入的只能是数字。如果你先输入字符串，那它就相当于没有加.number

  • 事件修饰符
<!-- 阻止单击事件继续传播 -->
<a v-on:click.stop="doThis"></a>

<!-- 提交事件不再重载页面 -->
<form v-on:submit.prevent="onSubmit"></form>

<!-- 修饰符可以串联 -->
<a v-on:click.stop.prevent="doThat"></a>

三、插槽

插槽分为普通插槽和作用域插槽，其实两者很类似，只不过作用域插槽可以接受子组件传递过来的参数。

1.作用域插槽

我们不妨通过一个todolist的例子来了解作用域插槽。如果当item选中后，文字变为黄色

// 父组件
<template>
  <div class="toList">
    <input v-model="info" type="text" /> <button @click="addItem">添加</button>
    <ul>
      <TodoItem v-for="(item, index) in listData" :key="index">
        <template v-slot:item="itemProps"> // 这是个具名插槽
        // 其中itemProps的值就是子组件传递过来的对象
          <span
            :style="{
              fontSize: '20px',
              color: itemProps.checked ? 'yellow' : 'blue'
            }"
            >{{ item }}</span
          >
        </template>
      </TodoItem>
    </ul>
  </div>
</template>
<script>
import TodoItem from "./TodoItem"
export default {
  components: {
    TodoItem
  },
  data() {
    return {
      info: "",
      listData: []
    }
  },
  methods: {
    addItem() {
      this.listData.push(this.info);
      this.info = ""
    }
  }
}
</script>

// 子组件
<template>
  <div>
    <li class="item">
      <input v-model="checked" type="checkbox" />
      <slot name="item" :checked="checked"></slot> // 将checked的值传递给父组件
    </li>
  </div>
</template>
<script>
export default {
  data() {
    return {
      checked: false
    }
  }
}
</script>

值得注意：v-bind:style 的对象语法十分直观——看着非常像 CSS，但其实是一个 JavaScript 对象。CSS 属性名可以用驼峰式 (camelCase) 或短横线分隔 (kebab-case，记得用引号括起来) 来命名。

2.v-slot新语法

在 2.6.0 中，我们为具名插槽和作用域插槽引入了一个新的统一的语法 (即 v-slot 指令)。它取代了 slot 和 slot-scope 。
我们通过一个例子介绍下默认插槽、具名插槽和作用域插槽的新语法：

// 父组件
<template>
  <div class="helloSlot">
    <h2>2.6 新语法</h2>
    <SlotDemo>
      <p>默认插槽：default slot</p>
      <template v-slot:title>
        <p>具名插槽：title slot1</p>
        <p>具名插槽：title slot2</p>
      </template>
      <template v-slot:item="props">
        <p>作用域插槽：item slot-scope {{ props }}</p>
      </template>
    </SlotDemo>
  </div>
</template>
<script>
import Slot from "./slot";
export default {
  components: {
    SlotDemo: Slot
  }
}
</script>

// 子组件
<template>
  <div>
    <slot />
    <slot name="title" />
    <slot name="item" :propData="propData" />
  </div>
</template>
<script>
export default {
  data() {
    return {
      propData: {
        value: "做梦跳绳闪到腰"
      }
    }
  }
}
</script>
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 159,015评论 4赞 362
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 67,262评论 1赞 292
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 108,727评论 0赞 243
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 43,986评论 0赞 205
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 52,363评论 3赞 287
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 40,610评论 1赞 219
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 31,871评论 2赞 312
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 30,582评论 0赞 198
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 34,297评论 1赞 242
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,551评论 2赞 246
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 32,053评论 1赞 260
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 28,385评论 2赞 253
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 33,035评论 3赞 236
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,079评论 0赞 8
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,841评论 0赞 195
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 35,648评论 2赞 274
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 35,550评论 2赞 270