vue组件

真的想不出名儿

已于 2023-05-29 16:02:14 修改

阅读量208

点赞数

分类专栏： vue基础语法文章标签： vue.js 前端

于 2023-05-29 12:12:56 首次发布

本文链接：https://blog.csdn.net/ioncannontic/article/details/130924347

版权

vue基础语法专栏收录该内容

26 篇文章 0 订阅

订阅专栏

为什么用组件

vue组件-概念

vue组件-基础使用

为什么用组件

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

方法1：复制代码

代码重复冗余
不利于维护

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

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

<style scoped>
#app {
  width: 400px;
  margin: 20px auto;
  background-color: yellow;
  border: 1px 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实例，封装标签、样式和代码

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

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

vue组件-基础使用

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

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

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

步骤：

1. 创建组件

创建组件 components/Panel.vue

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

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

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

<style scoped>
#app {
    width: 400px;
    margin: 20px auto;
    background-color: yellow;
    border: 1px 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>

2. 注册组件

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

全局注册使用

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

import Vue from 'vue'
import App from './App.vue'

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

Vue.config.productionTip = false

// render 渲染 渲染App.vue
new Vue({
  render: h => h(App),
}).$mount('#app')
// .$mount挂载到 id="app"的元素上  相当于el选项

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

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

<PanelG></PanelG>
<PanelG />
<panel-g></panel-g>

局部注册使用

语法

import 组件对象 from 'vue文件路径'
export default{
    components:{
        '组件名':组件对象
    }
}

在vue文件中引入、注册再使用

<template>
  <div id="app">
    <MyPanel></MyPanel>
    <my-panel></my-panel>
  </div>
</template>

<script>
import MyPanel from './components/MyPanel.vue'
export default {
  // 局部注册组件
  components: {
    'MyPanel': MyPanel,
  }
}
</script>

<style scoped></style>

组件使用总结：