VUE2快速入门(五)---组件进阶与插槽

不念不忘少年蓝@ 2022-12-24 12:57 168阅读 0赞

### 组件进阶与插槽 ###

*  组件进阶
 *   *  局部注册和全局注册
     *   *  局部注册
         *  全局注册
         *   *  方式一
             *  方式二
             *  方式二好处
     *  Props
     *   *  静态传值
         *  动态传值
         *  传值类型
         *   *  数字
             *  字符
             *  布尔值
             *  数组
             *  对象
         *  自定义事件
     *  插槽
     *   *  信息插槽
         *  代码插槽
     *  使用例子
     *   *  例一---简单弹窗
         *  例二---数据弹窗

# 组件进阶 #

> **命名注意: MyTest/my-test**  
> **小写-小写或者大写加大写**

## 局部注册和全局注册 ##

以这两个组件为例

![在这里插入图片描述][20201128143204745.png]

![在这里插入图片描述][20201128143153790.png]

### 局部注册 ###

在需要用的页面import引入  
在components注册

<template>
      <div>
          <test-com></test-com>
      </div>
    </template>
    <script> import TestCom from "../components/testCom"; export default { name: "Test1125", components: { TestCom}, }; </script>

### 全局注册 ###

#### 方式一 ####

![在这里插入图片描述][20201128142415984.png]  
在main.js中

import buttonMy from './components/button-my'
    
    Vue.component("button-my", buttonMy);

![在这里插入图片描述][20201128142758295.png]

#### 方式二 ####

自己写个js文件  
![在这里插入图片描述][20201128143632760.png]

import ButtonMy from "./button-my";
    
    ButtonMy.install = function(Vue) {
      Vue.component(ButtonMy.name, ButtonMy);
    };
    
    export default ButtonMy

#### 方式二好处 ####

可以批量注册组件 比如ElementUi的注册  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMDI3Njgx_size_16_color_FFFFFF_t_70]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMDI3Njgx_size_16_color_FFFFFF_t_70 1]

## Props ##

### 静态传值 ###

上篇我们已经讲过，这里再次演示  
我们已经全局注册ButtonMy组件

ButtonMy组件
    <div>
        <h2>{
       { title }}</h2>
        <button @click="count++">点击增加count</button>
        <div>count = {
       { count }}</div>
          <button @click="changeText">改变标题</button>
      </div>

使用
    <button-my title="我是代码哈士奇" ></button-my>

![在这里插入图片描述][2020112814410324.png]

### 动态传值 ###

注意 **:title** 其中 **:** 是 **v-bind:** 简写

<button-my :title="text" @changeTexts="text = '我是狗'"></button-my>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMDI3Njgx_size_16_color_FFFFFF_t_70 2]

### 传值类型 ###

数字，字符，布尔值，数组，对象  
当带有v-bind:时 会被认为js表达式  
如果不加就是单纯的字符串或者数字

#### 数字 ####

<button-my title=1 ></button-my>

![在这里插入图片描述][20201128144754612.png]

#### 字符 ####

<button-my title="我是狗" ></button-my>

![在这里插入图片描述][20201128144827976.png]

#### 布尔值 ####

注意 **:**

<button-my :title=false></button-my>

改造组件

<h2 v-if="title">{
       { title }}</h2>

![在这里插入图片描述][20201128145113465.png]

#### 数组 ####

传值

<button-my :title="[1,2,3]"></button-my>

组件中

<h2>{
       { title[0] }}</h2>

![在这里插入图片描述][20201128145341162.png]

#### 对象 ####

传一个完整的对象

<button-my :title="{ name: '代码哈士奇', id: 741741741 }"></button-my>

组件中

<h2>{
       { title.name }}</h2>
    <h2>{
       { title.id }}</h2>

![在这里插入图片描述][2020112814560430.png]  
传一个的对象某个属性

<button-my :title="post.name"></button-my>
     <script> export default { name: "Tests", data() { return { text: "I,dog", post:{ name: '代码哈士奇', id: 741741741 } }; } }; </script>

组件中

<h2>{
       { title}}</h2>

![在这里插入图片描述][20201128145856675.png]

### 自定义事件 ###

this.$emit('myEvent')

我们上一篇已经使用过  
![在这里插入图片描述][20201128150228201.png]

## 插槽 ##

模板的内容肯定不一样  
但是同样模板只定义一个  
就需要插槽  
插入代码，插入数据等

### 信息插槽 ###

**定义**

<template>
      <div>
        <p>
          <slot name="title"></slot>
        </p>
      </div>
    </template>
    
    <script> export default { name: "EasyModel" }; </script>

**使用**

<easy-model>
              <template slot="title">
                我是狗
              </template>
            </easy-model>

效果  
![在这里插入图片描述][20201128152824977.png]

### 代码插槽 ###

使用

<easy-model>
              <template slot="title">
                我是狗
              </template>
              <template slot="message">
                <h1>哈喽，点击下面链接去百度玩耍</h1>
                <a href="http://www.baidu.com">www.baidu.com</a>
              </template>
    </easy-model>

![在这里插入图片描述][20201128153437273.gif]

## 使用例子 ##

**model代码**

<template>
      <div>
        <section id="total" class="total-noShow" v-if="!mdshowd" @click="closeModal" ></section>
        <section id="comeIn" class="comeIn-noShow" v-bind:class="{ modalshow: mdshowd }" >
          <span style="position: relative;left:240px" v-if="!mdshowd" @click="closeModal" >X</span >
          <p style="width: 500px;align-content: center">
            <slot name="title"></slot>
          </p>
          <div class="main-Show">
            <slot name="message"></slot>
          </div>
          <div class="opTn">
            <slot name="btnGroup"></slot>
          </div>
        </section>
      </div>
    </template>
    
    <script> export default { name: "model", props: ["mdshowd"], methods: { closeModal() { this.$emit("close"); } } }; </script>
    
    <style scoped> .total-noShow { width: 100%; height: 100%; position: fixed; top: 0; left: 0; background-color: #8f949a; opacity: 0.4; } .comeIn-noShow { width: 500px; height: 500px; background-color: white; position: absolute; left: 750px; top: 250px; } .opTn { width: 500px; height: 40px; position: relative; top: 80px; } .main-Show { width: 400px; height: 330px; position: relative; left: 50px; top: 30px; } .modalshow { display: none; } </style>

**父组件js代码**

### 例一—简单弹窗 ###

现在我们结合之前学习的东西 来一个实践  
实现一个如下弹窗  
![在这里插入图片描述][20201128152252857.gif]实现代码

### 例二—数据弹窗 ###

进阶  
![在这里插入图片描述][20201128155118854.gif]  
实现代码

<template>
      <div>
        <div v-for="item in datas" :key="item.id">
          <div>{
       {item.name}}==={
       {item.id}}</div>
          <button @click="look(item)">查看</button>
        </div>
        <model :mdshowd="show" @close="show = true">
          <template slot="title">{
       {lookData.name}}</template>
          <template slot="message">
            我叫{
       {lookData.name}},我的代号是{
       {lookData.id}}
          </template>
          <template slot="btnGroup">
            <button @click="closeLook">关闭</button>
          </template>
        </model>
      </div>
    </template>

> 记得练习哦

>   大家好，我是代码哈士奇，是一名软件学院网络工程的学生，因为我是“狗”，狗走千里吃肉。想把大学期间学的东西和大家分享，和大家一起进步。但由于水平有限，博客中难免会有一些错误出现，有纰漏之处恳请各位大佬不吝赐教！暂时只在csdn这一个平台进行更新，博客主页：[https://blog.csdn.net/qq\_42027681][https_blog.csdn.net_qq_42027681]。

> `未经本人允许，禁止转载`

![在这里插入图片描述][20201110144238980.gif_pic_center]

后续会推出

前端：vue入门 vue开发小程序 等  
后端： java入门 springboot入门等  
服务器：mysql入门 服务器简单指令 云服务器运行项目  
python：推荐[不温卜火][Link 1] 一定要看哦  
一些插件的使用等

大学之道亦在自身，努力学习，热血青春  
如果对编程感兴趣可以加入我们的qq群一起交流：974178910  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMDI3Njgx_size_16_color_FFFFFF_t_70_pic_center]

有问题可以下方留言，看到了会回复哦

[20201128143204745.png]: /images/20221120/dc6ef7a8ab82486c94db0674e0ace1f6.png
[20201128143153790.png]: https://img-blog.csdnimg.cn/20201128143153790.png
[20201128142415984.png]: https://img-blog.csdnimg.cn/20201128142415984.png
[20201128142758295.png]: https://img-blog.csdnimg.cn/20201128142758295.png
[20201128143632760.png]: https://img-blog.csdnimg.cn/20201128143632760.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMDI3Njgx_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20201128143735500.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMDI3Njgx,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMDI3Njgx_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20201128143729984.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMDI3Njgx,size_16,color_FFFFFF,t_70
[2020112814410324.png]: https://img-blog.csdnimg.cn/2020112814410324.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMDI3Njgx_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20201128144315805.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMDI3Njgx,size_16,color_FFFFFF,t_70
[20201128144754612.png]: https://img-blog.csdnimg.cn/20201128144754612.png
[20201128144827976.png]: https://img-blog.csdnimg.cn/20201128144827976.png
[20201128145113465.png]: https://img-blog.csdnimg.cn/20201128145113465.png
[20201128145341162.png]: https://img-blog.csdnimg.cn/20201128145341162.png
[2020112814560430.png]: https://img-blog.csdnimg.cn/2020112814560430.png
[20201128145856675.png]: https://img-blog.csdnimg.cn/20201128145856675.png
[20201128150228201.png]: https://img-blog.csdnimg.cn/20201128150228201.png
[20201128152824977.png]: https://img-blog.csdnimg.cn/20201128152824977.png
[20201128153437273.gif]: https://img-blog.csdnimg.cn/20201128153437273.gif
[20201128152252857.gif]: https://img-blog.csdnimg.cn/20201128152252857.gif
[20201128155118854.gif]: https://img-blog.csdnimg.cn/20201128155118854.gif
[https_blog.csdn.net_qq_42027681]: https://blog.csdn.net/qq_42027681
[20201110144238980.gif_pic_center]: https://img-blog.csdnimg.cn/20201110144238980.gif#pic_center
[Link 1]: https://buwenbuhuo.blog.csdn.net/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMDI3Njgx_size_16_color_FFFFFF_t_70_pic_center]: https://img-blog.csdnimg.cn/20201118225427296.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMDI3Njgx,size_16,color_FFFFFF,t_70#pic_center