组件间通信高级

这里写目录标题

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

相关推荐
伍哥的传说41 分钟前
鸿蒙系统(HarmonyOS)应用开发之手势锁屏密码锁(PatternLock)
前端·华为·前端框架·harmonyos·鸿蒙
yugi98783843 分钟前
前端跨域问题解决Access to XMLHttpRequest at xxx from has been blocked by CORS policy
前端
浪裡遊1 小时前
Sass详解:功能特性、常用方法与最佳实践
开发语言·前端·javascript·css·vue.js·rust·sass
旧曲重听12 小时前
最快实现的前端灰度方案
前端·程序人生·状态模式
默默coding的程序猿2 小时前
3.前端和后端参数不一致,后端接不到数据的解决方案
java·前端·spring·ssm·springboot·idea·springcloud
夏梦春蝉2 小时前
ES6从入门到精通:常用知识点
前端·javascript·es6
归于尽2 小时前
useEffect玩转React Hooks生命周期
前端·react.js
G等你下课2 小时前
React useEffect 详解与运用
前端·react.js
我想说一句2 小时前
当饼干遇上代码:一场HTTP与Cookie的奇幻漂流 🍪🌊
前端·javascript
funnycoffee1232 小时前
Huawei 6730 Switch software upgrade example版本升级
java·前端·华为