vue中父子组件Props双向绑定
事件处理方式
1. v-on指令
1.直接把 JavaScript 代码写在 v-on 指令中是不可行的,v-on指令需要接收一个调用的方法名称,
<button v-on:click="greet">Greet</button>
// 在 `methods` 对象中定义方法
methods: {
greet: function (event) {
// `this` 在方法里指向当前 Vue 实例
alert('Hello ' + this.name + '!')
// `event` 是原生 DOM 事件
if (event) {
alert(event.target.tagName)
}
}
}
2. 事件内联处理器
2.除此之外vue还可以使用内联处理器,需要在内联语句处理器中访问原始的 DOM 事件。可以用特殊变量 $event 把它传入方法
<button v-on:click="say('hi')">Say hi</button>
<button v-on:click="say('what')">Say what</button>
<button v-on:click="warn('hello.', $event)">Submit</button>
// 在 `methods` 对象中定义方法
methods: {
say: function (message) {
alert(message)
},
warn: function (message, event) {
// 现在我们可以访问原生事件对象
if (event) {
event.preventDefault()
}
alert(message)
}
}
Props
所有的 prop 都使得其父子 prop 之间形成了一个单向下行绑定：父级 prop 的更新会向下流动到子组件中，但是反过来则不行。这样会防止从子组件意外改变父级组件的状态，从而导致你的应用的数据流向难以理解。
这里有两种常见的试图改变一个 prop 的情形：
- 这个 prop 用来传递一个初始值；这个子组件接下来希望将其作为一个本地的 prop 数据来使用。在这种情况下，最好定义一个本地的 data 属性并将这个 prop 用作其初始值：
props: ['initialCounter'],
data: function () {
return {
counter: this.initialCounter
}
}
- 这个 prop 以一种原始的值传入且需要进行转换。在这种情况下，最好使用这个 prop 的值来定义一个计算属性：
props: ['size'],
computed: {
normalizedSize: function () {
return this.size.trim().toLowerCase()
}
}
v-model
首先我们要知道v-model指令是用来在表单 <input>、<textarea> 及 <select> 元素上创建双向数据绑定,但 v-model 本质上不过是语法糖:value="msg" @input="msg = $event.target.value"
注意点:v-model 会忽略所有表单元素的 value、checked、selected attribute 的初始值而总是将 Vue 实例的数据作为数据来源。你应该通过 JavaScript 在组件的 data 选项中声明初始值。
image.png
实现组件Props双向绑定
在Vue2中组件的props的数据流动改为了只能单向流动，即只能由组件外（调用组件方）通过组件的DOM属性attribute传递props给组件内，组件内只能被动接收组件外传递过来的数据，并且在组件内，不能修改由外层传来的props数据。
假如我现在需要做一个弹出层组件,需求:
- 通过点击按钮实现弹出(显示)
- 不点击按钮,点击自己隐藏,或者直接修改状态实现隐藏和显示
方案一:
由于子组件不能直接修改props的值,所以:
- 子组件内的data下创建一个Props属性的副本
- 监听props属性 赋予data副本 来同步组件外对props的修改
- 创建针对props副本的watch，通知到组件外
解释:在第2步骤之后,我们在组件内修改了props的副本testShow，组件外此时不知道组件内的props状态，所以需要再创建一个针对props副本testShow的监听，即对应data属性的watch
image.png
缺点:
父组件必须有个 showChange 这样的方法，有点累赘。
思考:
个人认为只有在满足以下条件时再使用双向绑定的props:
- 组件内部需要修改props。
- 组件需要可以由外部在运行时动态控制，而非单纯初始化。
- 组件外部需要读取组件内的状态来进行处理
满足上述条件的有比如switch开关组件，需要外部控制开关状态；再比如Tab多标签页组件的activeIndex属性，需要可以由外部控制标签页当前打开哪一页等等
方案二:
v-model指令是用来在表单
<input>、<textarea> 及 <select>元素上创建双向数据绑定,但 v-model 本质上不过是语法糖:value="msg" @input="msg = $event.target.value"
image.png
这种实现父子组件见v-model绑定值的方法，在我们开发中其实是很常用的，特别是你要封装公共组件的时候。
方案三
先看下官方文档：vue .sync修饰符，里面说vue .sync 修饰符以前存在于vue1.0版本里，但是在在 2.0 中移除了 .sync 。但是在 2.0 发布之后的实际应用中，我们发现 .sync还是有其适用之处，比如在开发可复用的组件库时。我们需要做的只是让子组件改变父组件状态的代码更容易被区分。从 2.3.0 起我们重新引入了 .sync修饰符，但是这次它只是作为一个编译时的语法糖存在。它会被扩展为一个自动更新父组件属性的 v-on 监听器。 .sync属性 使用方法跟 v-model 类似
vue 修饰符sync的功能是：当一个子组件改变了一个 prop 的值时，这个变化也会同步到父组件中所绑定。如果我们不用.sync，我们想做上面的那个弹窗功能，我们也可以props传初始值，然后事件监听，实现起来也不算复杂。这里用sync实现，只是给大家提供一个思路，让其明白他的实现原理，可能有其它复杂的功能适用sync。
<comp :foo.sync="bar"></comp>
会被扩展为：
<comp :foo="bar" @update:foo="val => bar = val"></comp>
当子组件需要更新 foo 的值时，它需要显式地触发一个更新事件：
this.$emit('update:foo', newValue)
image.png
