VUE2快速入门(五)---组件进阶与插槽
代码哈士奇 137 2

组件进阶

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

局部注册和全局注册

以这两个组件为例

在这里插入图片描述

在这里插入图片描述

局部注册

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

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

全局注册

方式一

在这里插入图片描述 在main.js中

import buttonMy from './components/button-my'

Vue.component("button-my", buttonMy);

在这里插入图片描述

方式二

自己写个js文件 在这里插入图片描述

import ButtonMy from "./button-my";

ButtonMy.install = function(Vue) {
  Vue.component(ButtonMy.name, ButtonMy);
};

export default ButtonMy

方式二好处

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

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>

在这里插入图片描述

动态传值

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

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

在这里插入图片描述

传值类型

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

数字

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

在这里插入图片描述

字符

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

在这里插入图片描述

布尔值

注意 :

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

改造组件

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

在这里插入图片描述

数组

传值

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

组件中

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

在这里插入图片描述

对象

传一个完整的对象

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

组件中

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

在这里插入图片描述 传一个的对象某个属性

 <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>

在这里插入图片描述

自定义事件

this.$emit('myEvent')

我们上一篇已经使用过 在这里插入图片描述

插槽

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

信息插槽

定义

<template>
  <div>
    <p>
      <slot name="title"></slot>
    </p>
  </div>
</template>

<script>
export default {
  name: "EasyModel"
};
</script>

使用

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

效果 在这里插入图片描述

代码插槽

<div>
      <slot name="message"></slot>
</div>

使用

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

在这里插入图片描述

使用例子

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代码

<script>
import Model from "../components/model";
export default {
  name: "Tests",
  components: { Model },
  data() {
    return {
      text: "I,dog",
      show: true,
      post: { name: "代码哈士奇", id: 741741741 },
      datas:[{ name: "代码哈士奇", id: 1 },{ name: "哈哈", id: 2 }],
      lookData: ""
    };
  },
  methods:{
    look(item){
      this.show = false;
      this.lookData = item;
    },
    closeLook(){
      this.show = true;
      this.lookData = "";
    }
  }
};
</script>

例一---简单弹窗

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

<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">
    </model>
  </div>
</template>

例二---数据弹窗

进阶 在这里插入图片描述 实现代码

<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>



记得练习哦





  大家好,我是代码哈士奇,是一名软件学院网络工程的学生,因为我是“狗”,狗走千里吃肉。想把大学期间学的东西和大家分享,和大家一起进步。但由于水平有限,博客中难免会有一些错误出现,有纰漏之处恳请各位大佬不吝赐教!

未经本人允许,禁止转载

在这里插入图片描述


后续会推出

前端:vue入门 vue开发小程序 等 后端: java入门 springboot入门等 服务器:mysql入门 服务器简单指令 云服务器运行项目 一些插件的使用等

大学之道亦在自身,努力学习,热血青春 如果对编程感兴趣可以加入我们的qq群一起交流:974178910

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

预览图
评论区

索引目录