vue+ts

最新推荐文章于 2024-10-18 17:49:11 发布

XuanCode

最新推荐文章于 2024-10-18 17:49:11 发布

阅读量40

点赞数

分类专栏： xuexi 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/weixin_48798924/article/details/129520877

版权

xuexi 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

文章介绍了Vue2和Vue3中v-model的新用法，包括在父子组件通信中的应用，以及如何通过provide和inject进行跨级数据传递。此外，还提到了事件处理中的$event用法和混入(mixins)的概念，包括全局和局部混入的示例。

摘要由CSDN通过智能技术生成

v-model新用法

<Son :money="money" @update:money="fn"/>
<Son :money.sync="money"/>

vue3的时候

<Son :money="money" @update:money="fn"/>简写=>
<Son v-model:money="money"/>
   context.emit('update:money', 50)

依赖注入

目标:掌握使用provide函数和inject函数完成后代组件通信
使用场景:有一个父组件，里头有子组件，有孙组件，有很多后代组件，共享父组件数据
provide传数据和方法
inject 拿数据
父组件

<template>
  <div class="container">
    <h1>父组件{{money}}</h1>
    <hr>
    <Son v-model:money="money"></Son>
  </div>
</template>

<script>
import { provide, ref } from 'vue'
import Son from './Son.vue'
export default {
  name: 'App',
  components: {
    Son
  },
  //父组件的数据传递给子组件
  setup () {
    const changeMoney = (saleMoney) => {
      console.log('changeMoney', saleMoney);
    }
    const money = ref(100)
    provide('money', money)
    //获取方法
    provide('changeMoney', changeMoney)
    return {
      money
    }
  }
}
</script>

<style>
</style>

v-model新用法

如果@click绑定的是js表达式，此时提供一个默认的变量 $e v e n t 可以用$ event.target来改变dom

<template>
  <div class="container">
    <div>父组件</div>
    <!-- 如果绑定是函数fn fn(e) {// e就是事件对象} -->
    <!-- 如果绑定的是js 表达式此时会有一个默认的变量是$event -->
    <h1 @click="$event.target.style.color='pink'">父组件{{count}}</h1>
    <!-- 如果你想获取自定义事件 此时$event代表触发自定义事件的传参-->
    <!-- 如果绑定是函数 fn fn(data){data触发自定义事件的传参} -->
    <!-- 如果绑定的是js 表达式此时$event代表触发自定义事件的传参 -->
    <!-- <Son :modelvalue="count"
         @update:modelValue="count=$event"></Son> -->
    <Son v-model="count" />
    </Son>
  </div>
</template>

<script>
import Son from './Son.vue'
import { ref } from 'vue'
export default {
  name: 'App',
  components: {
    Son
  },
  setup() {
    const count = ref(100)
    return {
      count
    }
  }

}
</script>

<style>
</style>

混入mixins

1.全局混入


import { createApp } from 'vue'
import App from './App.vue'
const app = createApp(App)
//全局混入
// app.mixin({
//     mounted() {
//         console.log('欢迎进入我的世界', this.$el);
//     }
// })
app.mount("#app")

2.局部混入

<template>
  <div class="container1">
    <h1>作者：周杰伦 <a href="javascript:(0);"
         @click="followfn">{{loading?'loading...':'关注'}}</a></h1>
  </div>
</template>

<script>
import { followMixin } from './mixins.js'
export default {
  name: "Son",
  //   mixins,
  setup() {
  },
  mixins: [followMixin]
}
</script>

<style>
</style>