VUE2快速入门(四)---组件基础用法
代码哈士奇 156 2

全球疫情地图(点击可进入中国地图)上传github 点击地址 因为翻译问题部分国家数据未能渲染,可以对个别国家的名字手动翻译 实现 文章入口 在线地址: 点击进入

组件

自己定义一个模板元素

声明组件

在HTML中

app.component()

这种方法为全局注册

<div id="app">
    <button-my></button-my>
</div>

const app = Vue.createApp({})
app.component('button-my', {
    data() {
        return {
            count: 0
        }
    },
    template: `<button @click="count++">点击增加count</button>
<div>count = {{ count }} </div>`
})

app.mount('#app')

在这里插入图片描述

在VUE项目中

如果在vue项目中

声明

在这里插入图片描述

<template>
  <div>
      <button @click="count++">点击增加count</button>
      <div>count = {{ count }}</div>
  </div>
</template>

<script>
export default {
  name: "button-my",
  data() {
    return {
      count: 0
    };
  }
};
</script>

<style scoped></style>

使用

<template>
    <div>
        <button-my></button-my>
    </div>
</template>

<script>
    import ButtonMy from "../components/button-my";
    export default {
        name: "Tests",
        components: {ButtonMy}
    }
</script>

<style scoped>

</style>

在这里插入图片描述

Prop传值

改造刚才的组件

<template>
  <div>
    <h2>{{ title }}</h2>
    <button @click="count++">点击增加count</button>
    <div>count = {{ count }}</div>
  </div>
</template>

<script>
export default {
  name: "button-my",
  data() {
    return {
      count: 0
    };
  },
  // eslint-disable-next-line vue/no-dupe-keys
  props: ["title"]
};
</script>

在使用它的地方传值

 <button-my title="I,dog"></button-my>

在这里插入图片描述

监听组件事件

子组件这样写 changeText()函数里面的emit会接受父组件的changeTexts触发 详细看下面的父组件

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

<script>
export default {
  name: "button-my",
  data() {
    return {
      count: 0
    };
  },
  methods: {
    changeText() {
      this.$emit("changeTexts");
    }
  },
  // eslint-disable-next-line vue/no-dupe-keys
  props: ["title"]
};
</script>

<style scoped></style>

父组件

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

<script>
import ButtonMy from "../components/button-my";
export default {
  name: "Tests",
  components: { ButtonMy },
    data(){
      return{
          text:"I,dog"
      }
    }
};
</script>

<style scoped></style>

在这里插入图片描述

使用场景

插槽和动态模板

一个组件多次使用,比如 所有页面的弹窗都用到这个组件 只是动态改变了弹窗内容 详细见下篇 插槽的使用 在这里插入图片描述

下期

插槽的使用





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

未经本人允许,禁止转载

在这里插入图片描述


后续会推出

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

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

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

预览图
评论区

索引目录