VUE3 组件通信

  • 开发
  • 46

  1. props

    1. 用途：可以实现父子组件、子父组件、甚至兄弟组件通信

    2. 父组件

      <template>
    <div>
        <Son :money="money"></Son>
    </div>
</template>

<script setup lang="ts">
import Son from './son.vue'
import { ref } from 'vue';
let money = ref(1000)
</script>

<style scoped></style>

    3. 子组件

      <template>
    <div>
        {{ props.money }}
    </div>
</template>

<script setup lang="ts">
/*	两种方式都可以使用		*/
// defineProps({
//     money: {
//         type: Number,
//         default: 666
//     }
// })
let props = defineProps(['money'])
</script>

<style scoped></style>

  2. 自定义事件

    1. 用途：可以实现子父组件通信

    2. 父组件

      <template>
    <div>
        <Son  @zdy = 'handle'></Son>
    </div>
</template>

<script setup lang="ts">
import Son from './son.vue'
import { ref } from 'vue';
const handle = (a:any,b:any)=>{
    console.log(a,b) //
}
</script>

<style scoped></style>

    3. 子组件

      <template>
    <div>
        <Son  @zdy = 'handle'></Son>
    </div>
</template>

<script setup lang="ts">
import Son from './son.vue'
import { ref } from 'vue';
const handle = (a:any,b:any)=>{
    console.log(a,b) //
}
</script>

<style scoped></style>

  3. 全局事件总线$bus:

    1. 用途：可以实现任意组件通信

    2. 安装 

      pnpm i mitt

    3. 配置

      1. 新建bus.js文件

        import mitt from 'mitt'
const $bus = mitt()
export default $bus

    4. 使用

      1. 父组件

        <template>
    <div>
        <Son  @zdy = 'handle'></Son>
    </div>
</template>

<script setup lang="ts">
import Son from './son.vue'
import { ref } from 'vue';
import $bus from '../utils/bus.js'
$bus.on('dataToParent',(a:any)=>{
    console.log(a)
})
</script>

<style scoped></style>

      2. 子组件

        <template>
    <div>
        <button @click="dataToParent">点击向父组件发送全局事件总线数据</button>
    </div>
</template>

<script setup lang="ts">
import $bus from '../utils/bus.js'
const dataToParent = ()=>{
    $bus.emit('dataToParent','hello')
}
</script>

<style scoped></style>

  4. v-model

    1. 父组件

      <template>
    <div>
        <Son :money="money"></Son>
    </div>
</template>

<script setup lang="ts">
import Son from './son.vue'
import { ref } from 'vue';
let money = ref(1000)
</script>

<style scoped></style>

    2. 子组件

      <template>
    <div>
        {{ money }}
    </div>
</template>

<script setup lang="ts">
defineProps(['money'])
</script>

<style scoped></style>

  5. useAttrs

    1. 父组件

      <template>
    <div>
        <Son :money="money" title="attr传参" size='default' type="primary"></Son>
    </div>
</template>

<script setup lang="ts">
import Son from './son.vue'
import { ref } from 'vue';
let money = ref(1000)
</script>

<style scoped></style>

    2. 子组件

      <template>
    <div>
        {{ $attrs.money }} --{{ $attrs.title }}
    </div>
</template>

<script setup lang="ts">
import { useAttrs } from 'vue';
let $attrs = useAttrs()
console.log($attrs)
</script>

<style scoped></style>

  6. provide与inject

    1. 父组件

      <template>
    <div>
        <Son :money="money"></Son>
    </div>
</template>

<script setup lang="ts">
import Son from './son.vue'
import { ref,provide } from 'vue';
let money = ref(1000)
provide('name','wang')
</script>

<style scoped></style>

    2. 子组件

      <template>
    <div>
       
    </div>
</template>

<script setup lang="ts">
import { inject } from 'vue';
let name = inject('name')
console.log(name)
</script>

<style scoped></style>

  7. ref与$parent

    1. 父组件

      <template>
    <div>
        <div>当前父组件的money是{{ money }}</div>
        <button @click="take100FromSon">从儿子手里拿100元</button>
        <Son :money="money" ref="son"></Son>
        <Dau></Dau>

    </div>
</template>

<script setup lang="ts">
import Son from './son.vue'
import Dau from './daughtor.vue'
import { ref } from 'vue';
let son = ref()
let money = ref(1000)
const take100FromSon = ()=>
{
    son.value.money -=100;
    money.value+=100
}
defineExpose({
    money
})
</script>

<style scoped></style>

    2. 儿子组件1

      <template>
    <div>
       儿子的手里有{{ money }}
    </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
let money = ref(500)
defineExpose({
    money
})
</script>

<style scoped></style>

    3. 儿子组件2

      <template>
    <div>
女儿的手里有{{ money }}元
<button @click="take1000FromFather($parent)">从父亲手里拿1000元</button>
    </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
let money = ref(5000)
const take1000FromFather = ($parent:any)=>{
    $parent.money-=1000
    money.value+=1000
}
</script>

<style scoped>

</style>

  8. pinia

    1. 安装pinia 

      pnpm i pinia

    2. 初始化pinia

      1. 创建一个store文件夹，在下面新建一个index.js文件

        import {createPinia} from 'pinia'
let store = createPinia()
export default store

      2. 在main.js文件中声明

        import store from './pinia'
app.use(store)

    3. 使用pinia

      1. 在store下新建一个modules文件夹，用来管理pinia文件，例如，创建了一个test.js文件。

        import {defineStore} from 'pinia'
import {ref} from 'vue'
export const testPinia = defineStore('testPinia',()=>{
    const a = ref('hello')
    const sendMessage = ()=>{
        a.value = 'hello,vue'
        console.log(a.value)
    }
    return{a,sendMessage}
})

      2. 组件中使用

        <template>
    <div>

    </div>
</template>

<script setup lang="ts">
import {testPinia} from '../pinia/modules/test.js'
const testpinia = testPinia()
console.log(testpinia.a)
testpinia.sendMessage()
</script>

<style scoped>

</style>

  9. slot

    1. 默认插槽

      1. 父组件

        <template>
<Son>
  <h1>我是默认插槽填充的结构</h1>
</Son>

**具名插槽：**
</template>

<script setup lang="ts">
import Son from './son.vue'
</script>

<style scoped>

</style>

      2. 子组件

        <template>
    <div>
      <slot></slot>
    </div>
  </template>
  <script setup lang="ts">
  </script>
  <style scoped>
  </style>

      3. 效果图

    2. 具名插槽

      1. 父组件

        <template>
  <h1>slot</h1>
    <Son>
      <template v-slot:a> 
        <!-- //可以用#a替换  -->
        <div>填入组件A部分的结构</div>
      </template>
      <template v-slot:b>
        <!-- //可以用#b替换 -->
        <div>填入组件B部分的结构</div>
      </template>
    </Son>
</template>

<script setup lang="ts">
import Son from './son.vue'
</script>

<style scoped>

</style>

      2. 子组件

        <template>
    <div>
      <h1>todo</h1>
      <slot name="a"></slot>
      <slot name="b"></slot>
    </div>
  </template>
  <script setup lang="ts">
  </script>
  
  <style scoped>
  </style>

      3. 效果图

    3. 作用域插槽

      1. 概念：可以理解为，子组件数据由父组件提供，但是子组件内部决定不了自身结构与外观(样式)

      2. 父组件

        <template>
  <div>
    <h1>slot</h1>
    <Son :todos="todos">
      <template #="{$row,$index}">
         <!--父组件决定子组件的结构与外观-->
         <span :style="{color:$row.done?'green':'red'}">{{$row.title}}</span>
      </template>
    </Son>
  </div>
</template>

<script setup lang="ts">
import Son from "./son.vue";
import { ref } from "vue";
//父组件内部数据
let todos = ref([
  { id: 1, title: "吃饭", done: true },
  { id: 2, title: "睡觉", done: false },
  { id: 3, title: "打豆豆", done: true },
]);
</script>
<style scoped>
</style>

      3. 子组件

        <template>
  <div>
    <h1>todo</h1>
    <ul>
     <!--组件内部遍历数组-->
      <li v-for="(item,index) in todos" :key="item.id">
         <!--作用域插槽将数据回传给父组件-->
         <slot :$row="item" :$index="index"></slot>
      </li>
    </ul>
  </div>
</template>
<script setup lang="ts">
defineProps(['todos']);//接受父组件传递过来的数据
</script>
<style scoped>
</style>

      4. 效果图

阅读全部

相关推荐

  5. Vue3父子组件通信

    2024-03-19 10:46:06       63 阅读

  9. Vue3组件通信相关内容整理

    2024-03-19 10:46:06       58 阅读

最近更新

  3. docker php8.1+nginx base 镜像 dockerfile 配置

    2024-03-19 10:46:06       94 阅读

  4. Could not load dynamic library ‘cudart64_100.dll‘

    2024-03-19 10:46:06       101 阅读

  9. 在Django里面运行非项目文件

    2024-03-19 10:46:06       82 阅读

  19. Python语言-面向对象

    2024-03-19 10:46:06       91 阅读

  20. 如何分清楚常见的 Git 分支管理策略Git Flow、GitHub Flow 和 GitLab Flow

    2024-03-19 10:46:06       85 阅读

热门阅读

  1. nginx相关内容的安装

    2024-03-19 10:46:06       38 阅读

  3. webpack和vite的区别是什么

    2024-03-19 10:46:06       34 阅读

  5. ArcGIS Pro 和 ArcMap 10个不同

    2024-03-19 10:46:06       64 阅读

  13. 30个业务场景的SQL优化

    2024-03-19 10:46:06       35 阅读

  18. 方法引用的学习

    2024-03-19 10:46:06       45 阅读

  21. LWC 学习资源

    2024-03-19 10:46:06       43 阅读

  25. Android学习深入

    2024-03-19 10:46:06       40 阅读

  29. Django 中 null=True 和 blank=True 的作用

    2024-03-19 10:46:06       35 阅读