父组件向子组件 props 里传递了 msg 和 show 两个值，都用了.sync 修饰符，进行双向绑定。

不过.sync 虽好，但也有限制，比如：

1）不能和表达式一起使用（如v-bind:title.sync="doc.title + !"是无效的）； 2）不能用在字面量对象上（如v-bind.sync="{ title: doc.title }"是无法正常工作的）。

• 方法4：将父组件中的数据包装成对象传递给子组件

这是因为在 JavaScript 中对象和数组是通过引用传入的，所以对于一个数组或对象类型的 prop 来说，在子组件中改变这个对象或数组本身将会影响到父组件的状态。比如上例中在子组件中修改父组件传递过来的数组arr,从而改变父组件的状态。

5. 向子组件中传递数据时加和不加 v-bind？

对于字面量语法和动态语法，初学者可能在父组件模板中向子组件中传递数据时到底加和不加 v-bind 会感觉迷惑。

v-bind:msg = msg

这是通过 v-bind 进行传递数据并且传递的数据并不是一个字面量，双引号里的解析的是一个表达式，同样也可以是实例上定义的数据和方法(其实就是引用一个变数）。

msg=浪里行舟

这种在没有 v-bind 的模式下只能传递一个字面量，这个字面量只限于 String 类量，字元串类型。那如果想通过字面量进行数据传递时，如果想传递非String类型，必须props名前要加上v-bind，内部通过实例寻找，如果实例方没有此属性和方法，则默认为对应的数据类型。

:msg=11111 //Number
:msg=true //Bootlean
:msg=()=>{console.log(1)} //Function
:msg={a:1} //Object


二、事件

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>

给大家推荐一个好用的BUG监控工具Fundebug，欢迎免费试用！

参考

• 5种处理Vue异常的方法
• Vue开发入门看这篇文章就够了
• Fundebug发布Vue插件，简化BUG监控接入代码
• Vue组件间通信6种方式

关于Fundebug

Fundebug专注于JavaScript、微信小程序、微信小游戏、支付宝小程序、React Native、Node.js和Java线上应用实时BUG监控。 自从2016年双十一正式上线，Fundebug累计处理了10亿+错误事件，付费客户有阳光保险、荔枝FM、掌门1对1、核桃编程、微脉、青团社等众多品牌企业。欢迎免费试用！

推荐阅读：