组件间通信高级

这里写目录标题

event深入
v-model深入
- 深入v-model：实现父子组件数据同步(实现父子组件通信)
属性修饰符sync
[a t t r s 与 attrs与 attrs与listeners](#a t t r s 与 attrs与 attrs与listeners)
[children与 $parent](#children与$ parent)
作用域插槽scope-slot
事件(自定义事件与原生dom事件)

event深入

v-model深入

它是vue框架中指令，它主要结合表单元素一起使用(文本框，复选框，单选等等)，它主要的作用是收集表单数据
双向绑定是：value与@input语法糖

javascript 复制代码

<template>
  <div>
    <input type="text" :value="msg" @input="msg = $event.target.value">
    {{ msg }}
  </div>
</template>

<script>
export default {
  name: 'App',
  data() {
    return {
      msg: '我爱那塞北的雪'
    }
  }
}
</script>

深入v-model：实现父子组件数据同步(实现父子组件通信)

value与input事件实现的，而且还需要注意可以通过v-model实现父子组件同步

属性修饰符sync

组件通信方式的一种，可以实现父子组件数据同步

:money.sync，代表父组件给字符串传递props $money$ ,给当前子组件绑定一个自定义事件（update:money）

.sync说明，我们把money传递给子组件并且可以监听到money的变化

父组件

javascript 复制代码

<template>
  <div>
    <hr>
    <!-- 相当于我们对prop的修改也变成了双向绑定 -->
    <HelloWorld :value="msg" @update:value="msg=$event"></HelloWorld>
    <HelloWorld :value.sync="msg"></HelloWorld>
  </div>
</template>
<script>
import HelloWorld from './components/HelloWorld.vue'
export default {
  components: { HelloWorld },
  name: 'App',
  data() {
    return {
      msg: '我爱那塞北的雪'
    }
  },
  methods:{
  }
}
</script>

子组件

javascript 复制代码

<template>
  <div>
    {{ value }}
  <button @click="hand">改变父组件数据</button>
  </div>
</template>
<script>
export default {
  props:['value'],
  methods: {
    hand() {
      this.$emit('update:value','新标题')
    }
  }
}
</script>

a t t r s 与 attrs与 attrs与listeners

children与$parent

作用域插槽scope-slot

事件(自定义事件与原生dom事件)

系统事件:click，鼠标事件等
自定义事件
- 自定义事件是需要 o n 与 on与 on与emit结合的 ,给原生dom绑定自定义事件是没有意义的，因为无法触发$emit.
给组件标签上绑定的事件不是系统事件，是自定义事件，自定义事件需要在组件内部触发，如果将自定义事件变为原生dom事件，需要加.nactive修饰符。
父组件内绑定自定义事件

javascript 复制代码

<template>
<div>
  <HelloWorld @input="click"></HelloWorld>
</div> 
</template>

子组件内触发$emit，并可以传入相应参数

javascript 复制代码

<template>
  <div>
    <input type="text" :value="value" @input="hand" placeholder="输入你想要的内容">
  </div>
</template>
<script>
export default {
  methods: {
    hand(e) {
      this.$emit('input', e.target.value)
    }
  }
}
</script>

.nactive的原理是给组件根标签绑定原生事件。