Vue 全组件 局部组件

这篇具有很好参考价值的文章主要介绍了Vue 全组件 局部组件。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

一、组件定义和使用

1、全局组件

定义

<template>

    <div>

        <h1>This is a global component</h1>

    </div>

</template>

<script lang="ts">

</script>

<style></style>文章来源地址https://www.toymoban.com/news/detail-830398.html

 Vue 全组件 局部组件,Vue,vue.js,前端

导入

全局组件在main.ts(Vue + TS的项目)引入,

或者在main.js(Vue + JS的项目)引入

import { createApp } from 'vue'

import App from './App.vue'

import router from './router'

import store from './store'

import GlobalComponent  from "../src/components/component/GlobalComponent.vue";

const app = createApp(App)

app.component("GlobalComponent",GlobalComponent);

app.use(store).use(router).mount('#app')

 Vue 全组件 局部组件,Vue,vue.js,前端

使用 

全局组件可以在任意组件中使用,不需要再次导入

Vue 全组件 局部组件,Vue,vue.js,前端

2、局部组件

定义

Vue 全组件 局部组件,Vue,vue.js,前端

导入与使用

Vue 全组件 局部组件,Vue,vue.js,前端

二、组件通信

1、props

(1)传递单个值

Vue 全组件 局部组件,Vue,vue.js,前端

 Vue 全组件 局部组件,Vue,vue.js,前端

(2)传递多个值

如果传递的时对象,对象在被子组件的props接收时需要解构,依次写在props数组中

Vue 全组件 局部组件,Vue,vue.js,前端

 Vue 全组件 局部组件,Vue,vue.js,前端

 传递的如果是一个个的值,则直接在props数组中写入即可

Vue 全组件 局部组件,Vue,vue.js,前端

 Vue 全组件 局部组件,Vue,vue.js,前端

2、插槽

插槽的作用:让子组件可以接收父组件传过来的元素、组件

(1)匿名插槽

如果父元素只传递一个元素,或者传递的多个元素会在一个地方使用,那么可以使用匿名插槽

Vue 全组件 局部组件,Vue,vue.js,前端

 Vue 全组件 局部组件,Vue,vue.js,前端

 Vue 全组件 局部组件,Vue,vue.js,前端

(2)具名插槽

父组件会传递多个元素,这些元素需要再不同的地方使用,这时需要使用具名插槽进行区分

 Vue 全组件 局部组件,Vue,vue.js,前端

 Vue 全组件 局部组件,Vue,vue.js,前端

 Vue 全组件 局部组件,Vue,vue.js,前端

(3)作用域插槽

父组件需要用到子组件中的数据时,可以使用作用域插槽将子组件的数据传递过去

子组件

<template>

    <div>

        <h1>This is a local component</h1>

       <slot v-for="(item,index) in list" :item="item" :index="index"/>

    </div>

</template>

<script lang="ts" setup>

const list = [1,2,3,4];

</script>

 //父组件

<template>

  <div>

    <h1>This is a component view</h1>

    <div>

      <GlobalComponent />

      <LocalComponent v-slot="slotProps">

        <div>{{ slotProps.item }}*****{{ slotProps.index }}</div>

      </LocalComponent>

    </div>

  </div>

</template>

//父组件写法二

<template>

  <div>

    <h1>This is a component view</h1>

    <div>

      <GlobalComponent />

      <LocalComponent v-slot="{item,index}">

        <div>{{ item }}*****{{ index }}</div>

      </LocalComponent>

    </div>

  </div>

</template> 

3、provide&inject

父组件给子组件传值,子组件使用props接收,如果孙子组件乃至重孙子组件要使用父组件的数据,那么就要一层层用props传递,特别麻烦。

父组件使用provide(提供)提供数据

子组件、孙子组件、重孙子组件....可以使用inject接收数据

//父组件

<template>

  <div>

    <LocalComponent />

  </div>

</template>

<script setup lang="ts">

import LocalComponent from "../components/component/LocalComponent.vue";

import { provide, ref } from "vue";

const msg = ref('hello world');

provide('msg',msg);

</script>

 //子组件

<template>

    <div>

        LocalComponent

        <GrandChild />

    </div>

</template>

<script lang="ts" setup>

import GrandChild from '../component/GrandChild.vue';

</script>

 //孙子组件

<template>

    <div>

        <h1>This is a GrandChild component</h1>

        {{ msg }}

    </div>

</template>

<script lang="ts" setup>

import { inject } from "vue";

const msg = inject('msg');

</script>

<style></style>

4、事件通信

 

三、异步组件

到了这里,关于Vue 全组件 局部组件的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 封装vue2局部组件都要注意什么

    template  =  组件的模板结构  (必选) 每个组件对应的模板结构,需要定义到template节点中 template中使用的指令 template定义根节点 注:vue 2.x版本中,template节点内dom结构仅支持单个根节点;但在vue 3.x版本中,支持多个根节点 script  =  组件的javascript行为  (可选) script中的

    2024年02月13日
    浏览(50)
  • 【庖丁解牛】vue-element-admin前端CRUD通用操作组件详解,对,核心就是crud.js文件

    vue-element-admin 框架之所以能够快速定制应用,得益于其通配的CRUD操作,属性配置多样化且个性化,能够满足绝大部分开发需求,也方便了代码生成。 可以深入学习重点源文件是: src/components/Crud/crud.js ,一共 863 行代码,以及下图中其它四个vue组件,形成了对通用CRUD操作的高

    2024年01月18日
    浏览(59)
  • 【vue3】js + css 实现 视频框选放大:局部细节放大、放大镜效果

    实现鼠标框选区域放大显示。 需求1:放大 按住鼠标左键不放 ——》向右侧拖动,框选出需要放大的区域后 ——》松开鼠标 ——》框选区域放大显示 需求2:还原 按住鼠标左键不放 ——》向左侧拖动,框选出随意大小的区域后 ——》松开鼠标 ——》视图显示大小还原 需求

    2024年02月03日
    浏览(56)
  • Vue 循环map对象拿到key值和value值,VUE 获取对象{}的key值,vue根据对象id删除数组中的对象,实现局部刷新的功能,vue中JS 对象动态添加键值对 vue中JS 对象动态添加键值对

    适用场景: vue中定义的map对象 map : { name : \\\'xxx\\\' } 接口回显map格式的数据 data :{ key : value} 都可以通过以下方式拿到key和value的值 VUE 获取对象{}的key值  vue根据对象id删除数组中的对象,实现局部刷新的功能 方法一:使用过滤器 注:这个一般是根据对象id 方法二:使用splice() 注

    2024年02月16日
    浏览(56)
  • Vue 循环map对象拿到key值和value值,VUE 获取对象{}的key值,vue根据对象id删除数组中的对象,实现局部刷新的功能,vue中JS 对象动态添加键值对

    适用场景: vue中定义的map对象 map : { name : \\\'xxx\\\' } 接口回显map格式的数据 data :{ key : value} 都可以通过以下方式拿到key和value的值 VUE 获取对象{}的key值  vue根据对象id删除数组中的对象,实现局部刷新的功能 方法一:使用过滤器 注:这个一般是根据对象id 方法二:使用splice() 注

    2024年02月08日
    浏览(54)
  • 【vue】vue.js中引入组件

    注意组件中的name命名方式 希望我的分享能够帮助到更多的人,如果觉得我的分享有帮助的话,请大家一键三连支持一下哦~ ❤️原创不易,期待你的关注与支持~ 点赞👍+收藏⭐️+评论✍️ 😊之后我会继续更新前端学习小知识,关注我不迷路~

    2024年02月12日
    浏览(44)
  • Vue.js组件精讲 第2章 基础:Vue.js组件的三个API:prop、event、slot

    如果您已经对 Vue.js 组件的基础用法了如指掌,可以跳过本小节,不过当做复习稍读一下也无妨。 一个再复杂的组件,都是由三部分组成的:prop、event、slot,它们构成了 Vue.js 组件的 API。如果你开发的是一个通用组件,那一定要事先设计好这三部分,因为组件一旦发布,后面

    2024年04月16日
    浏览(75)
  • 前端(四)——vue.js、vue、vue2、vue3

    😊博主:小猫娃来啦 😊文章核心: vue.js、vue、vue2、vue3从全局到局部 Vue.js是一款流行的JavaScript框架 vue,vue2,vue3都是vue.js的不同版本。 Vue:Vue.js的第一个版本,也称为Vue 1.x。它于2014年首次发布,并获得了广泛的应用和认可。 Vue2:Vue.js的第二个版本,也称为Vue 2.x。它在Vu

    2024年02月12日
    浏览(79)
  • 前端Vue入门-day04-用vue实现组件通信

    (创作不易,感谢有你,你的支持,就是我前行的最大动力,如果看完对你有帮助,请留下您的足迹) 目录 组件的三大组成部分 注意点说明 组件的样式冲突 scoped data 是一个函数 组件通信 什么是组件通信 不同的组件关系 和 组件通信方案分类   父子通信流程图:  父 → 子

    2024年02月15日
    浏览(54)
  • 【前端技术】Vue3 01:初识 Vue.js

    Vue 可以说是非常流行了,至少在国内是这样,他是个轻量级的 JavaScript 框架,非常适合构建大型和中小型的 Web 应用程序,如果想和前端打交道,应该绕不过这个框架吧。 目录 1 Vue.js 介绍 2  IDE 选择 2.1 vscode 2.2 WebStorm 2.3 Eclipse 3  创建 Vue 应用 3.1 本地脚手架创建 ① 安装

    2024年02月02日
    浏览(64)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包