没有搭建脚手架时vue组件的使用方式

更新时间：2023年10月31日 09:16:42 作者：越来越好。

这篇文章主要介绍了没有搭建脚手架时vue组件的使用方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教

没有搭建脚手架时vue组件的使用

全局组件

//全局组件 第一种声名方式
var s = Vue.extend({
template: "<h6>全局组件 第一种声名方式</h6>"
})
Vue.component("hello", s);
//前台标签调用 <hello></hello>
//全局组件 第二种声明方式
Vue.component("k", {
template: "<h6>全局组件 第二种声明方式</h6>"
});
//前台标签调用 <k></k>

局部组件

components: {
//局部组件，声明方式1
    zujian1: {
        template: "<h6>局部组件，声明方式</h6>" //因为声明的是字符串直接调用 <zujian1></zujian1>
    },
//局部组件，声明方式2
    zujian2: {
        template: "#zujian2",
            data() {
                return {
                    msg: "组件2的值"
                    }
                }            
            },
}
//第二种调用方式
//因为声明的不是字符串所以不能直接使用 需要通过标签<template id="zujian2"></template> 标签之间必须要用html标签
如<template id="zujian2"><div>{{msg}}</div></template> 不能没有html标签就直接调用
 
<head>
    <template id="zujian2">  //此处要加上组件的id
        <p>{{msg}}</p>
     </template>
<body>
    <!--页面容器-->
    <div id="my" class="container" v-cloak>
        <div class="container">
            <hello></hello>
            <k></k>
            <zujian1></zujian1>
            <zujian2></zujian2> /*为空的时候不能使用，必须要用到模板*/
        </div>
    </div>
</body>
</head>

vue脚手架—组件的使用

为什么用组件

在这里插入图片描述

需求：想要多个收起展开的部分

方法1：复制代码

代码重复
冗余不利于维护

<template>
  <div id="app">
    <!-- 目标:点击展开或收起时，把内容区域显示或者隐藏 -->
    <h3>折叠面板</h3>
    <div>
      <div class="title">
        <h4>芙蓉楼送辛渐</h4>
        <span @click="isShow = !isShow">{{ isShow ? '收起' : '展开' }}</span>
      </div>
      <div class="container" v-show="isShow">
        <p>一片冰心在玉壶</p>
        <p>一片冰心在玉壶</p>
        <p>一片冰心在玉壶</p>
        <p>一片冰心在玉壶</p>
      </div>
    </div>
    <!-- 复制 -->
    <div>
      <div class="title">
        <h4>芙蓉楼送辛渐</h4>
        <span @click="isShow1 = !isShow1">{{ isShow1 ? '收起' : '展开' }}</span>
      </div>
      <div class="container" v-show="isShow1">
        <p>一片冰心在玉壶</p>
        <p>一片冰心在玉壶</p>
        <p>一片冰心在玉壶</p>
        <p>一片冰心在玉壶</p>
      </div>
    </div>
    <!-- 复制 -->
    <div>
      <div class="title">
        <h4>芙蓉楼送辛渐</h4>
        <span @click="isShow2 = !isShow2">{{ isShow2 ? '收起' : '展开' }}</span>
      </div>
      <div class="container" v-show="isShow2">
        <p>一片冰心在玉壶</p>
        <p>一片冰心在玉壶</p>
        <p>一片冰心在玉壶</p>
        <p>一片冰心在玉壶</p>
      </div>
    </div>
  </div>
</template>


<script>
export default {
  data() {
    return {
      isShow: false,
      isShow1: false,
      isShow2: false,
    }
  },
}
</script>


<style scoped>
#app {
  width: 400px;
  margin: 20px auto;
  background-color: yellow;
  border: 4px solid burlywood;
  border-radius: 2px;
  padding: 10px;
}
h3 {
  text-align: center;
}
.title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border: 1px solid #ccc;
  padding: 0 5px;
}
</style>

vue 组件-概念

可复用的vue实例，封装标签，样式和代码

组件化：封装的思想，把页面上可复用的部分，封装为组件，从而方便项目的开发和维护

一个页面，可以拆分成一个个组件（一个vue文件），一个组件就是一个整体，每个组件可以有自己独立的结构，样式和行为(html,css,js)

请添加图片描述

vue组件–基础使用

每个组件都是一个独立的个体，代码里体现为一个独立的vue文件

哪部分标签复用，就把哪部分封装到组件内

组件内template只能有一个标签
组件内的data必须是一个函数，独立作用域

步骤：

1.创建组件

创建组件 components/Pannel.vue

封装结构+样式+js 组件都是独立的，为了复用

<template>
  <div>
    <div class="title">
      <h4>芙蓉楼送辛渐</h4>
      <span @click="isShow = !isShow">{{ isShow ? '收起' : '展开' }}</span>
    </div>
    <div class="container" v-show="isShow">
      <p>一片冰心在玉壶</p>
      <p>一片冰心在玉壶</p>
      <p>一片冰心在玉壶</p>
      <p>一片冰心在玉壶</p>
    </div>
  </div>
</template>


<script>
export default {
  data() {
    return {
      isShow: false,
    }
  },
}
</script>


<style scoped>
.title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border: 1px solid #ccc;
  padding: 0 5px;
}
</style>

2.注册组件

注册组件，创建后需要注册后再使用

全局注册使用

全局入口main.js 在new Vue之上注册

语法：

// 全局注册组件
// 1 引入组件
import Pannel from './components/Pannel'
// 2 全局注册组件
/* 
 Vue.component('组件名',组件对象)
*/
Vue.component('PannelG', Pannel)

全局注册组件PannelG，就可以当做标签在任意vue文件中的template中使用

单双标签都可以或者小写加 - 形式，运行后，会把这个自定义标签当做组件解析，使用组件里封装的标签替换到这个位置

    <PannelG></PannelG>
    <PannelG />
    <pannel-g></pannel-g>

局部注册使用

语法

import 组件对象 from 'vue文件路径'

export default {
    components：{
        '组件名':组件对象
    }
}

在vue文件中引入，注册，使用

<template>
  <div id="app">

    <hr />
    <MyPannel></MyPannel>
    <my-pannel></my-pannel>
  </div>
</template>

<script>
// 1引入组件
import MyPannel from './components/MyPannel.vue'
export default {
  //2 局部注册组件
  components: {
    MyPannel: MyPannel,
  },
}
</script>

组件使用总结：

(创建)封装html+css+js到独立的.vue文件中
(引入注册)组件文件==>得到组件配置对象
(使用)当前页面当做标签使用

vue组件-scoped作用

解决多个组件样式名相同，冲突问题

需求：div标签名选择器，设置背景色

问题: 组件里的div和外面的div都生效了

解决：给Pannel.vue组件里style标签上加scoped属性

<style scoped>

在style上假如scoped属性，就会在此组件的标签上加上一个随机生成的data-v开头的属性

而且必须是当前组件的元素，才会有这个自定义属性，才会被这个样式作用到

style上加scoped，组件内的样式只在当前vue组件生效

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

搭建Vue3+Vite+Ts脚手架的示例代码

VUE中如何优雅实现爷孙组件的数据通信
所谓祖孙组件,也就是3层嵌套的组件,下面这篇文章主要给大家介绍了关于VUE中如何优雅实现爷孙组件的数据通信的相关资料,需要的朋友可以参考下
2022-04-04
Vue实现一键将HTML导出为图片的完整教程
在日常开发中,经常会遇到这样的需求：将页面内容生成图片（分享海报）或者导出报表截图,因此本文将教你如何在 Vue 项目中,一键将 HTML 内容导出为图片（PNG）,需要的朋友可以参考下
2026-03-03
vue中的Canvas使用及说明
文章详细介绍了HTML5 Canvas的模板区、样式区和脚本区的使用方法,包括如何设置Canvas的宽高、水平居中、获取Canvas元素、绘制图形（直线、矩形、圆、文字）、转换为Base64、下载图片以及加载图片并添加文字水印等操作
2025-10-10
Vue Router打造丝滑的滚动控制与惊艳的路由动画
Vue Router 作为 Vue.js 生态中的核心路由解决方案,提供了强大的滚动行为控制和路由过渡动画能力,让我们能够打造出令人印象深刻的用户体验,下面小编就和大家简单介绍一下吧
2025-12-12
详解Vue路由自动注入实践
这篇文章主要介绍了详解Vue路由自动注入实践，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2019-04-04
vue 实现剪裁图片并上传服务器功能
这篇文章主要介绍了vue 实现剪裁图片并上传服务器功能，非常不错，具有参考借鉴价值,需要的朋友可以参考下
2018-03-03
使用Vue完成一个简单的todolist的方法
本篇文章主要介绍了使用Vue完成一个简单的todolist的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-12-12
elementui实现表格(el-table)默认选中功能
这篇文章主要介绍了elementui实现表格(el-table)默认选中功能,本文给大家分享实现思路结合实例代码给大家介绍的非常详细,需要的朋友参考下吧
2024-07-07
vue项目首屏打开速度慢的解决方法
这篇文章主要介绍了vue项目首屏打开速度慢的解决方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2019-03-03
详解vue父子组件间传值(props)
本篇文章主要介绍了详解vue父子组件间传值(props)，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-06-06