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

代码哈士奇

发布于 2021-01-26 15:57:04

4030

发布于 2021-01-26 15:57:04

文章被收录于专栏：dmhsq_csdn_blogdmhsq_csdn_blog

组件进阶与插槽

组件进阶

命名注意: 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

方式二好处

可以批量注册组件比如EleentUi的注册

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>

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

后续会推出

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

大学之道亦在自身，努力学习，热血青春

本文参与腾讯云自媒体分享计划，分享自作者个人站点/博客。

原始发表：2020-11-28 ，如有侵权请联系 cloudcommunity@tencent.com 删除

编程算法

vue.js

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体分享计划，欢迎热爱写作的你一起参与！

编程算法

vue.js

登录后参与评论

0 条评论

热度