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

目录
  • 一、什么是组件?
  • 二、创建全局组件
    • 方式一
      • 1、Vue.extend
      • 2、Vue.component
    • 方式二
      • 直接使用Vue.component
    • 方式三
  • 三、 创建局部组件
  • 四、组件中的data 和 methods
  • 五、组件间的通信方式
    • props/$emit
    • 通过事件形式
  • 总结

一、什么是组件?

组件 (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(事件)给父组件发送消息,实际上就是子组件把自己的数据发送到父组件。

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

(0)

相关推荐

  • vue组件创建的三种方式小结

    1.使用Vue.extend创建全局的Vue组件 //1.1 使用vue.extend创建组件 var com1 = Vue.extend({ //通过template属性指定组件要展示的html结构 template : "<h3>使用vue.extend创建的组件</h3>" }) //1.2使用Vue.component('组件名称',创建出来的组件模板对象) Vue.component('myCom1',com1) 把名称以标签的形式放到页面中<m

  • vue 动态创建组件的两种方法

    Vue动态创建组件实例并挂载到body 方式一 import Vue from 'vue' /** * @param Component 组件实例的选项对象 * @param props 组件实例中的prop */ export function create(Component, props) { const comp = new (Vue.extend(Component))({ propsData: props }).$mount() document.body.appendChild(c

  • 详解如何创建并发布一个 vue 组件

    步骤 创建 vue 的脚手架 npm install -g @vue/cli vue init webpack 绑定 git 项目 cd existing_folder git init git remote add origin http://gitlab.alipay-inc.com/ampg/my-projec.git git add . git commit git push -u origin master 写组件 创建组件 src/components/xxx.vue 例如: <te

  • Vue组件创建和传值的方法

    ## 创建组件的3种方法 # 第一种:  + Vue.extend()函数返回一个组件的构造器,里面包含一个参数,参数是对象,对象里面是一些配置项 + Vue.component()函数利用Vue.extend()返回的构造器创建一个组件的实例,有两个参数.; 参数1:组件名字,参数2:组件构造器 注意:       模板template中只能有一个根节点 组建的名字采用驼峰命名的话,使用时,就要加上"-"; 例如:组件名字indexA-->index-a; ## 第二种:  +

  • 详解Vue新增内置组件的使用

    目录 一.Teleport 1.1 Teleport 介绍 1.2 使用 Teleport 1.3 预览效果 二.Suspense 2.1 介绍 Suspense 2.2 使用 Suspense 2.3 预览效果 总结 一.Teleport Teleport 官方文档 1.1 Teleport 介绍 1.Vue 鼓励我们通过将 UI 和相关行为封装到组件中来构建我们的 UI.我们可以将它们相互嵌套以构建构成应用程序 UI 的树. 2.但是,有时组件模板的一部分在逻辑上属于该组件,而从技术角度来看

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

    目录 一.什么是组件? 二.创建全局组件 方式一 1.Vue.extend 2.Vue.component 方式二 直接使用Vue.component 方式三 三. 创建局部组件 四.组件中的data 和 methods 五.组件间的通信方式 props/$emit 通过事件形式 总结 一.什么是组件? 组件 (Component) 是 Vue.js 最强大的功能之一.组件可以扩展 HTML 元素,封装可重用的代码.在较高层面上,组件是自定义元素,Vue.js 的编译器为它添加特殊功能. 二.创

  • 一篇文章带你吃透Vue生命周期(结合案例通俗易懂)

    目录 1.vue生命周期 1.0_人的-生命周期 1.1_钩子函数 1.2_初始化阶段 1.3_挂载阶段 1.4_更新阶段 1.5_销毁阶段 2.axios 2.0_axios基本使用 2.1_axios基本使用-获取数据 2.2_axios基本使用-传参 2.3_axios基本使用-发布书籍 2.4_axios基本使用-全局配置 3.nextTick和refs知识 3.0$refs-获取DOM 3.1$refs-获取组件对象 3.2$nextTick使用 3.3$nextTick使用场景 3.

  • 一篇文章带你了解vue路由

    目录 概念 Vue Router 简介 Vue Router的特性 Vue Router的使用步骤 分类 嵌套路由 动态路由 命名路由 编程式导航 总结 概念 路由的本质就是一种对应关系,比如说我们在url地址中输入我们要访问的url地址之后,浏览器要去请求这个url地址对应的资源.那么url地址和真实的资源之间就有一种对应的关系,就是路由. 路由分为前端路由和后端路由 1).后端路由是由服务器端进行实现,并完成资源的分发后端路由性能相对前端路由来说较低,所以,我们接下来主要学习的是前端路由2)

  • 一篇文章带你了解vue.js的事件循环机制

    目录 一.事件循环机制介绍 二.经典事件循环面试题 总结 一.事件循环机制介绍 JS是单线程的语言,浏览器和Node.js定义了各自的Event Loop(事件循环机制)则是用来解决异步问题.将程序分为“主线程(执行栈)”与“Event Loop线程”,“主线程”自上而下依次执行同步任务,“Event Loop线程”将异步任务推入宏任务队列与微任务队列去执行. 事件循环机制从整体上告诉了我们 JavaScript 代码的执行顺序 Event Loop 即事件循环,是指浏览器或Node 的一种解决

  • 一篇文章带你使用Typescript封装一个Vue组件(简单易懂)

    一.搭建项目以及初始化配置 vue create ts_vue_btn 这里使用了vue CLI3自定义选择的服务,我选择了ts.stylus等工具.然后创建完项目之后,进入项目.使用快捷命令code .进入Vs code编辑器(如果没有code .,需要将编辑器的bin文件目录地址放到环境变量的path中).然后,我进入编辑器之后,进入设置工作区,随便设置一个参数,这里比如推荐设置字号,点下.这里是为了生成.vscode文件夹,里面有个json文件. 我们在开发项目的时候,项目文件夹内的文件很

  • 一篇文章带你彻底搞懂VUE响应式原理

    目录 响应式原理图 编译 创建compile类 操作fragment 获取元素节点上的信息 获取文本节点信息 操作fragment 响应式 数据劫持 收集依赖 响应式代码完善 Dep类 全局watcher用完清空 依赖的update方法 需要注意的一个地方 双剑合璧 总结 首先上图,下面这张图,即为MVVM响应式原理的整个过程图,我们本篇都是围绕着这张图进行分析,所以这张图是重中之重. 响应式原理图 一脸懵逼?没关系,接下来我们将通过创建一个简单的MVVM响应系统来一步步了解这个上图中的全过程.

  • 一篇文章带你吃透Vuex3的状态管理

    目录 一. Vuex是什么 Vue全局事件总线 Vuex状态管理 何时使用Vuex 二. 纯vue组件案例 计算总数案例 添加人员案例 三. Vuex工作原理和流程 第一种工作流程 第二种工作流程 生活化的Vuex工作原理 四. 在项目中引入Vuex 安装Vuex 创建store 在Vue中挂载store 五. Vuex的核心属性用法 单一数据源(state) 状态更新方式(mutations) store中的计算属性(getters) 异步更新状态(actions) 同步增加总数 异步增加总数

  • 一篇文章带你了解Java Spring基础与IOC

    目录 About Spring About IOC Hello Spring Hello.java Beans.xml Test.java IOC创建对象的几种方式 Spring import settings Dependency Injection 1.构造器注入 2.set注入 3.拓展注入 P-namespcae&C-namespace Bean scopes singleton prototype Bean的自动装配 byName autowire byType autowire 小结

  • 一篇文章带你弄清楚Redis的精髓

    目录 一.Redis的特性 1.1 Redis为什么快? 1.2 Redis其他特性 1.3 Redis高可用 二.Redis数据类型以及使用场景 2.1 String 2.1.1 基本指令 2.1.2 应用场景 2.2 Hash 2.2.1 基本指令 2.2.2 应用场景 2.3 List 2.3.1 基本指令 2.3.2 应用场景 2.4 Set 2.4.1 基本指令 2.4.2 应用场景 2.5 ZSet(SortedSet) 2.5.1 基本指令 2.5.2 应用场景 三.Redis的事

  • 一篇文章带你搞定SpringBoot中的热部署devtools方法

    一.前期配置 创建项目时,需要加入 DevTools 依赖 二.测试使用 (1)建立 HelloController @RestController public class HelloController { @GetMapping("/hello") public String hello(){ return "hello devtools"; } } 对其进行修改:然后不用重新运行,重新构建即可:只加载变化的类 三.热部署的原理 Spring Boot 中热部

随机推荐