组件间通信高级

这里写目录标题

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

相关推荐
mCell15 小时前
GSAP ScrollTrigger 详解
前端·javascript·动效
gnip15 小时前
Node.js 子进程:child_process
前端·javascript
excel18 小时前
为什么在 Three.js 中平面能产生“起伏效果”?
前端
excel19 小时前
Node.js 断言与测试框架示例对比
前端
天蓝色的鱼鱼21 小时前
前端开发者的组件设计之痛:为什么我的组件总是难以维护?
前端·react.js
codingandsleeping21 小时前
使用orval自动拉取swagger文档并生成ts接口
前端·javascript
石金龙1 天前
[译] Composition in CSS
前端·css
白水清风1 天前
微前端学习记录(qiankun、wujie、micro-app)
前端·javascript·前端工程化
Ticnix1 天前
函数封装实现Echarts多表渲染/叠加渲染
前端·echarts
用户22152044278001 天前
new、原型和原型链浅析
前端·javascript