组件间通信高级

这里写目录标题

• 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语法糖

<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，代表父组件给字符串传递propsmoney,给当前子组件绑定一个自定义事件（update:money）

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

父组件

<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>

子组件

<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修饰符。
• 父组件内绑定自定义事件

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

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

<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的原理是给组件根标签绑定原生事件。