Vue进阶（八十八）：vue中的.sync修饰符用法及原理详解

子组件使用this.$emit()向父组件传值时，首先必须在父组件中引用子组件，然后实现传值。

第一步 在父组件中引入子组件

引入
使用import引入组件

import indexImportOrder from './components/indexImportOrder'

  

 

  
1
 

声明

 //定义组件
 components:{ indexImportOrder,
 },

  

 

  
1
  
2
  
3
  
4
 

使用

<indexImportOrder ref="indexImportOrder"/>

  

 

  
1
 

第二步 子组件向父组件传值

在子组件中需要向父组件传值处，使用this.$emit("function",param); 其中，function与父组件中@后的函数名一致，param为需要传递参数。

在父组件引用子组件处，添加函数v-on:function="function1"； 其中，function为子组件中传递的函数名称保持一致，function1为父组件定义函数（用于接收子组件传值并进行相应数据处理）
v-on： 可用 @ 代替 。@function="function1" ，@ 为 v-on：的简写。

<indexImportOrder ref="indexImportOrder" @closeMain="closeMainPar"/>

  

 

  
1
 

val为接收的子组件参数，

closeMainPar(val){
  this.flag = val;
},

  

 

  
1
  
2
  
3
 

vue中我们经常会用v-bind(缩写为:)给子组件传入参数。或者我们会给子组件传入一个函数，子组件通过调用传入的函数来改变父组件的状态。
例如：

//父组件给子组件传入一个函数
 <MyFooter :age="age" @setAge="(res)=> age = res">
 </MyFooter>
 //子组件通过调用这个函数来实现修改父组件的状态。
 mounted () { console.log(this.$emit('setAge',1234567));
 }

  

 

  
1
  
2
  
3
  
4
  
5
  
6
  
7
 

这时子组件触发了父组件的修改函数,使父组件的age修改成了1234567.

这种情况比较常见切写法比较复杂。于是我们引出今天的主角 .sync(数据双向绑定)

这时我们可以直接这样写

//父组件将age传给子组件并使用.sync修饰符，数据双向绑定会把子组件的age属性同步会父组件的age属性。
<MyFooter :age.sync="age">
</MyFooter>
//子组件触发事件
 mounted () { console.log(this.$emit('update:age',1234567));
 }

  

 

  
1
  
2
  
3
  
4
  
5
  
6
  
7
 

这里注意我们的事件名称被换成了update:age

• update：是被固定的,也就是vue为我们约定好的名称部分。
• age是我们要修改的状态名称，是我们手动配置的，与传入的状态名字对应起来。

这样就完成了，是不是感觉简单了很多。

注意事项：
这里我们必须在事件执行名称前加上update：的前缀才能正确触发事件。

文章来源: shq5785.blog.csdn.net，作者：No Silver Bullet，版权归原作者所有，如需转载，请联系作者。

原文链接：shq5785.blog.csdn.net/article/details/103794823