组件间通信高级

这里写目录标题

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

相关推荐
一洽客服系统1 分钟前
网页嵌入与接入功能说明
开发语言·前端·javascript
DoraBigHead15 分钟前
this 的前世今生:谁在叫我,我听谁的
前端·javascript·面试
蓝婷儿1 小时前
每天一个前端小知识 Day 28 - Web Workers / 多线程模型在前端中的应用实践
前端
琹箐1 小时前
Ant ASpin自定义 indicator 报错
前端·javascript·typescript
小小小小小惠1 小时前
Responsetype blob会把接口接收的二进制文件转换成blob格式
前端·javascript
爱电摇的小码农1 小时前
【深度探究系列(5)】:前端开发打怪升级指南:从踩坑到封神的解决方案手册
前端·javascript·css·vue.js·node.js·html5·xss
kymjs张涛1 小时前
零一开源|前沿技术周报 #7
android·前端·ios
爱编程的喵1 小时前
React入门实战:从静态渲染到动态状态管理
前端·javascript
Tttian6222 小时前
npm init vue@latestnpm error code ETIMEDOUT
前端·vue.js·npm
患得患失9492 小时前
【前端】【组件库开发】【原理】【无框架开发】现代网页弹窗开发指南:从基础到优化
前端