Vue子组件修改父组件传递的数据之sync应用

子组件修改父组件传递的数据

子组件修改父组件传递来的数据，sync 应用。

.sync官网详情

方法1

父组件：

<com-button :yan="co"></com-button>

子组件：

<template>
    <div id="btn">
      <button :style="{color:yan}">我是按钮</button>
      <button @click="yan='yellow'">修改</button>
      <!--
		虽然子组件接收的yan可以被修改，但是firebug报错，说明不推荐、不允许。
		分析：父组件可以修改，组件两头都修改，没有秩序了 -->
    </div>
</template>

<script>
export default {
  name: 'Button',
  // 对父组件传递过来的数据进行接收
  props: ['yan']
}
</script>

方法2

最传统的实现子组件修改父组件传递数据的方法：

1. 父组件声明事件，子组件调用事件修改co。
2. 父组件通过事件实现co变化，yan就变化，子组件由于响应式，yan自然发生变化。

父组件：

<!-- 箭头函数，data就一个参数[data是自定义的]，()是否设置都可以，后边语句需要设置{} -->
<com-button :yan="co" @xiugai="data=>{co=data}"></com-button>

子组件：

<template>
    <div id="btn">
      <button :style="{color:yan}">我是按钮</button>
      <button @click="$emit('xiugai','purple')">修改</button>
    </div>
</template>

<script>
export default {
  name: 'Button',
  // 对父组件传递过来的数据进行接收
  props: ['yan']
}
</script>

方法3

通过update:xxx的方式给子组件声明事件

父组件：

<!-- 事件名称为 update:xxx 的格式，xxx 就是传递给子组件的数据的名称 -->
<com-button :yan="co" @update:yan="data=>{co=data}"></com-button>

子组件：

<template>
    <div id="btn">
      <button :style="{color:yan}">我是按钮</button
      <button @click="$emit('update:yan','green')">修改</button>
    </div>
</template>

<script>
export default {
  name: 'Button',
  // 对父组件传递过来的数据进行接收
  props: ['yan']
}
</script>

方法4

通过.sync优化父组件的相关操作，update是固定标志：

父组件：

<!-- 通过 [:yan.sync="co"]就是对[:yan="co" @update:yan="data=>{co=data}"]的封装 -->
<com-button :yan.sync="co"  :se.sync="abc"></com-button>

子组件：

<template>
    <div id="btn">
        <button :style="{color:yan}">我是按钮</button>
        <button @click="$emit('update:yan','blue')">修改</button>
    </div>
</template>

<script>
export default {
  name: 'Button',
  // 对父组件传递过来的数据进行接收
  props: ['yan']
}
</script>