iis服务器助手广告广告
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >一篇文章带你了解Vue组件的创建和使用
  • 153
分享到

一篇文章带你了解Vue组件的创建和使用

2024-04-02 19:04:59 153人浏览 八月长安
摘要

目录一、什么是组件?二、创建全局组件方式一1、Vue.extend2、Vue.component方式二直接使用Vue.component方式三三、 创建局部组件四、组件中的data

一、什么是组件?

组件 (Component) 是 vue.js 最强大的功能之一。组件可以扩展 html 元素,封装可重用的代码。在较高层面上,组件是自定义元素,Vue.js 的编译器为它添加特殊功能。

二、创建全局组件

方式一

1、Vue.extend


       var com1 = Vue.extend({
// 通过 template 属性,指定了组件要展示的HTML结构
               template: '<h3>这是使用 Vue.extend 创建的组件</h3>'
            })

2、Vue.component

Vue.component(‘组件的名称', 创建出来的组件模板对象) 注册组件


  Vue.component('myCom1', com1)

注意:如果使用Vue.Component 注册全局组件的时候,组件的名称使用了驼峰命名,则在引用组件的时候需要把大写的驼峰改为小写的字母,同时,两个单词之前,使用 “–” 链接。如果不使用则直接拿名称来使用即可。

在这里插入图片描述

方式二

直接使用Vue.component


            Vue.component('mycom2', {
                template: '<div><h3>这是直接使用 Vue.component 创建出来的组件</h3>
<span>123</span></div>'
            })

示例:

在这里插入图片描述

方式三

1、被控制的 #app 外面,使用 template 元素,定义组件的HTML模板结构。


<template id="tmpl">
            <div>
                <h1>这是通过 template 元素,在外部定义的组件结构</h1>
                <h4>好用,不错!</h4>
            </div>
        </template>

2、使用id注册组件


   Vue.component('mycom3', {
        template: '#tmpl'
    })

三、 创建局部组件

局部组件的创建和全局组件的创建方法一样。唯一区别的是,局部组件是在Vue实例中定义的。

在这里插入图片描述

四、组件中的data 和 methods

1、组件可以拥有自己的数据。

2、组件中的data 和实例中的data 有点不一样,实例中的data 可以为一个对象。但是组件中的data必须是一个方法。

3、组件中的data除了是一个方法,还必须返回一个对象。

4、组件中的data 的使用方式和 实例中的data 使用方式一样。(methods也一样)

在这里插入图片描述

五、组件间的通信方式

在这里插入图片描述

props/$emit

父组件A通过props的方式向子组件B传递,B to A 通过在 B 组件中 $emit, A 组件中 v-on 的方式实现。

子组件:


<template>
  <div class="hello">
    <ul>
      <li v-for="(user,index) in users" v-bind:key="index">{{ user }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  name: "users",
  props: {
    users: {  //父组件中子标签自定义的名字
      type: Array,
      require: true
    }
  }
}
</script>

<style scoped>
 li{
   list-style-position: inside;
 }
</style>

父组件:


<template>
  <div id="app">
    <img alt="Vue loGo" src="./assets/logo.png">
    <Users v-bind:users="users"> </Users>
  </div>
</template>

<script>
import Users from "@/components/users";
export default {
  name: 'App',
  data(){
    return {
      users: ['西安邮电','西安石油','西北政法','西安工业','西安财经']
    }
  },
  components: {
    Users,
  }
}
</script>

通过事件形式

子组件


<template>
  <header>
    <h1 @click="changeTitle">{{ title }}</h1>
  </header>
</template>
<script>
export default {
  name: "Son",
  data(){
    return {
      title: 'Vue.js Demo'
    }
  },
  methods: {
    changeTitle(){
      this.$emit('titleChanged','西安邮电大学');
    }
  }
}
</script>

<style scoped>
 h1{
   background-color: greenyellow;
 }
</style>

父组件:


<template>
  <div id="app">
    <Son v-on:titleChanged="updateTitle"></Son>
    <h2>{{ title }}</h2>
  </div>
</template>
<script>
import Son from "@/components/Son";
export default {
  name: "Father",
  data(){
    return {
      title: '传递的是一个值'
    }
  },
  methods: {
    updateTitle(e){
      this.title = e
    }
  },
  components:{
    Son,
  }
}
</script>

总结

子组件通过events(事件)给父组件发送消息,实际上就是子组件把自己的数据发送到父组件。

本篇文章就到这里了,希望能够给你带来帮助,也希望您能够多多关注编程网的更多内容!

--结束END--

本文标题: 一篇文章带你了解Vue组件的创建和使用

本文链接: https://www.lsjlt.com/news/160813.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • 一篇文章带你了解Vue组件的创建和使用
    目录一、什么是组件?二、创建全局组件方式一1、Vue.extend2、Vue.component方式二直接使用Vue.component方式三三、 创建局部组件四、组件中的data ...
    99+
    2024-04-02
  • 一篇文章带你了解vue路由
    目录概念Vue Router简介Vue Router的特性Vue Router的使用步骤分类嵌套路由动态路由命名路由编程式导航总结概念 路由的本质就是一种对应关系,比如说我们在url...
    99+
    2024-04-02
  • 一篇文章带你了解Java方法的使用
    目录方法的基本用法 方法定义基本语法格式:为什么方法一般用public static修饰?代码示例:注意事项: 方法调用的调试过程IDEA 的调试过程: ...
    99+
    2024-04-02
  • 一篇文章带你详细了解JavaScript数组
    目录一、数组的作用:二、数组的定义:1.通过构造函数创建数组2.通过字面量的方式创建数组三、数组元素四、数组长度五、数组索引(下标)六、数组注意的问题1.数组中存储的数据可以是不一样...
    99+
    2024-04-02
  • 一篇文章带你了解python元组基础
    目录1. 元组基本知识1.元组的基本格式和用法2. 元组操作实例1.建立元组2.查找元素:通过元组下标实现。3.删除元组:对元组的删除时不允许的,可以通过del函数,实现对整个元组对...
    99+
    2024-04-02
  • 一篇文章带你了解Java SpringBoot四大核心组件
    目录一、Spring Boot Starter1.1 Starter的应用示例二、Spring Boot Autoconfigure2.1 autoconfigure 简介 三、Sp...
    99+
    2024-04-02
  • 一篇文章带你了解webscraper爬虫插件
    最近看到很多同学都在研究爬虫,然后我想到了一款尘封已久的插件,很早之前在我刚接触爬虫的时候用过,不过自从上了python爬虫过后,慢慢就搁置了,今天花时间撸一篇教程,给同学们安利这款插件,如果刚开始学爬虫,它一定是你通往人生巅峰的不二人选哦...
    99+
    2023-06-01
  • 一篇文章带你了解XGBoost算法
    目录1. 什么是XGBoost1.1 XGBoost树的定义1.2 正则项:树的复杂度1.3 树该怎么长1.4 如何停止树的循环生成2. XGBoost与GBDT有什么不同3. 为什...
    99+
    2024-04-02
  • 一篇文章带你了解JavaScript-语句
    目录表达式语句复合语句和空语句复合语句空语句声明语句varfunction条件语句ifif/elseelse ifswitch循环whiledo/whileforfor/in跳转标签...
    99+
    2024-04-02
  • 一篇文章带你了解jQuery动画
    目录1.控制元素的显示与隐藏 show() hide()2.控制元素的透明度 fadeIn() fadeOut()3:控制元素的高度 slideUp() slideDown()总结 ...
    99+
    2024-04-02
  • 一篇文章带你了解JavaScript-对象
    目录创建对象对象直接量通过new创建对象原型Object.create()属性的查询和设置继承属性访问错误删除属性检测属性序列化对象总结创建对象 对象直接量 对象直接量是由若干名/值...
    99+
    2024-04-02
  • 一篇文章带你了解Java Stream流
    目录一、Stream流引入现有一个需求:1.用常规方法解决需求2.用Stream流操作集合,获取流,过滤操作,打印输出二、Stream流的格式三、获取流四、Stream流的常用方法方...
    99+
    2024-04-02
  • 一篇文章带你了解Java SpringBoot Nacos
    目录1、什么是Nacos 1.1与eureka对比1.2与zookeeper对比1.3与springcloud config 对比 2、Spring Cloud Alibaba 套件...
    99+
    2024-04-02
  • 一篇文章带你了解初始Spring
    目录为什么要使用SpringSpring概述Spring容器使用流程1.启动容器2.完成bean的初始化3.注册bean到容器中4.装配bean的属性bean的注册bean属性注入总...
    99+
    2024-04-02
  • 一篇文章带你了解Python中的类
    目录1、类的定义2、创建对象3、继承总结1、类的定义 创建一个rectangle.py文件,并在该文件中定义一个Rectangle类。在该类中,__init__表示构造方法。其中,s...
    99+
    2024-04-02
  • 一篇文章带你了解Spring AOP 的注解
    目录1、xml 的方式实现 AOP①、接口 UserService②、实现类 UserServiceImpl③、切面类,也就是通知类 MyAspect④、AOP配置文件 applic...
    99+
    2024-04-02
  • 一篇文章带你了解常用的Maven命令
    目录1、创建 Maven 工程2、Maven 的常用命令①、compile:将Java 源程序编译成 class 字节码文件。②、test:测试,并生成测试报告③、mvn clean...
    99+
    2024-04-02
  • 一篇文章带你了解C语言的文件操作
    目录为什么使用文件什么是文件程序文件数据文件文件名文件的打开和关闭文件指针fopen和fclose函数文件的顺序读写总结为什么使用文件 我们在想既然是通讯录就应该把信息记录下来,只有...
    99+
    2024-04-02
  • 一篇文章带你了解Java泛型的super和extends
    目录概念简单理解代码样例解读关于List<? super T>add方面返回值方面关于List<? extendsT>add方面返回值方面总结...
    99+
    2024-04-02
  • 一篇文章带你了解清楚Mysql 锁
    一丶为什么数据库需要锁 数据库锁设计的初衷是处理并发问题。作为多用户共享 的资源,当出现并发访问的时候,数据库需要合理地控制资源的访问规则。而锁就是用来实 现这些访问规则的重要数据结构。 根据加锁的范围,mysql 里面...
    99+
    2022-11-29
    mysql锁机制 mysql锁机制应用场景 mysql锁表和解锁语句
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作