组件间通信高级

这里写目录标题

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

相关推荐
IT_陈寒6 小时前
Python异步编程的7个致命误区:90%开发者踩过的坑及高效解决方案
前端·人工智能·后端
猫猫村晨总6 小时前
整理了几道前端面试题
前端·vue.js·面试
江拥羡橙6 小时前
【目录-多选】鸿蒙HarmonyOS开发者基础
前端·ui·华为·typescript·harmonyos
你的电影很有趣6 小时前
lesson55:CSS导航组件全攻略:从基础导航条到动态三级菜单与伸缩菜单实现
前端·css
蔗理苦6 小时前
2025-09-05 CSS4——浮动与定位
开发语言·前端·css·html·css3
浊浪载清辉7 小时前
《Html泛型魔法学院:用霍格沃茨风格网页教授集合框架》
前端·javascript·学习·html
Want5957 小时前
HTML元素周期表
前端·html
一只一只妖10 小时前
突发奇想,还未实践,在Vben5的Antd模式下,将表单从「JS 配置化」改写成「模板可视化」形式(豆包版)
前端·javascript·vue.js
悟能不能悟13 小时前
js闭包问题
开发语言·前端·javascript
秋秋_瑶瑶13 小时前
vue-amap组件呈现的效果图如何截图
前端·javascript·vue-amap