vue中一般都会把公共内容作为一个组件去布局,但是如何引用自定义的组件呢?下面就是vue调用自定义组件的方式,主要代码如下:

  

<template>
<div>
<span>调用自定义的Dialog组件</span>
<Dialog />
</div>
</template>
<script>
import Dialog from 'Dialog' //引入自定义组件
export default {
components: {//组件名
Dialog //Dialog组件名
},
data() {
return {
visible: false
}
},
methods: {//方法
openDialog() {
this.visible = true // 通过data显式控制dialog
}
},
//钩子函数,mounted组件挂载完成
mounted(){
console.log('mounted组件挂载完成');
},
}
</script>
  <style scoped>
    /*scoped 为局部样式*/
  </style>

vue组件的调用方式的更多相关文章

  1. vue组件之间传值方式解析

    vue组件之间传值方式解析一.父组件传到子组件 1.父组件parent代码如下: <template> <div class="parent"> <h ...

  2. vue 组件间传值方式

    /* 父组件给子组件传值 1.父组件调用子组件的时候 绑定动态属性 <v-header :title="title"></v-header> 2.在子组件里 ...

  3. vue组件常用声明方式

    一.前言 这是自己重新写的一个,感觉以前的太写了很多不必要的方式 实际当中基本不会用的 所以自己写了一个常用的组件什么方式 更加的通俗易懂 二.代码如下 <!DOCTYPE html> & ...

  4. Vue组件的定义方式

    1.使用template标签定义组件 <!DOCTYPE html> <html> <head> <meta charset="UTF-8" ...

  5. Vue (三) --- Vue 组件开发

    ------------------------------------------------------------------好心情,会让你峰回路转. 5. 组件化开发 5.1 组件[compo ...

  6. vue 组件开发、vue自动化工具、axios使用与router的使用(3)

    一. 组件化开发 1.1 组件[component] 在网页中实现一个功能,需要使用html定义功能的内容结构,使用css声明功能的外观样式,还要使用js定义功能的特效,因此就产生了一个功能先关的代码 ...

  7. 三: vue组件开发及自动化工具vue-cli

    一: 组件化开发 1 组件 1: 组件(Component)是自定义封装的功能.在前端开发过程中,经常出现多个网页的功能是重复的,而且很多不同的网站之间,也存在同样的功能. 2: 什么是组件 而在网页 ...

  8. vue组件通信全面总结

    写在前面 组件间的通信是是实际开发中非常常用的一环,如何使用对项目整体设计.开发.规范都有很实际的的作用,我在项目开发中对此深有体会,总结下vue组件间通信的几种方式,讨论下各自的使用场景 文章对相关 ...

  9. Vue组件的介绍与使用

    组件系统是将一个大型的界面切分成一个一个更小的可控单元. 组件是可复用的,可维护的. 组件具有强大的封装性,易于使用. 大型应用中,组件与组件之间交互是可以解耦操作的. 全局组件的使用 <!DO ...

随机推荐

  1. webpack 集成 Typescript && Less

    webpack 集成 Typescript && Less TypeScript是JavaScript的一个类型化的超集,可以编译成纯JavaScript,在本指南中,我们将学习如何将 ...

  2. TCP的状态及变迁

    十一种状态如下图: 全部11种状态1. 客户端独有的:(1)SYN_SENT (2)FIN_WAIT1 (3)FIN_WAIT2 (4)CLOSING (5)TIME_WAIT .2. 服务器独有的: ...

  3. 一键对centos7.6安装python3环境已经pip3

    1 yum -y install "Development tools" 2 yum -y install zlib-devel bzip2-devel openssl-devel ...

  4. 【Codeforces Round #429 (Div. 2) C】Leha and Function

    [Link]:http://codeforces.com/contest/841/problem/C [Description] [Solution] 看到最大的和最小的对应,第二大的和第二小的对应. ...

  5. curl查看index以及settings

    1.查看mapping curl -u elastic:elastic -XGET "127.0.0.1:9200/index_name/_mapping" 2.查看setting ...

  6. git stash 保存和恢复进度

    1. stash当前修改 git stash会把所有未提交的修改(包括暂存的和非暂存的)都保存起来,用于后续恢复当前工作目录. 比如下面的中间状态,通过git stash命令推送一个新的储藏,当前的工 ...

  7. flutter duplicate symbol '_GetDirectoryOfType' in:

    ld: warning: directory not found for option '-F/Users//codingProject/vipidea-app/ios/Runner/SuperPla ...

  8. 剑指offer——二进制中1的个数(c++)

    题目描述实现一个函数,输入一个整数,输出该数二进制表示中1的个数.例如,把9表示成二进制是1001,则输出为2 常规解法首先把n和1做位运算,判断n的最低位是不是1,然后把1左移一位得到2,再把n和2 ...

  9. 动态栈-------C语言

    使用带头结点的单链表实现 主要使用链表中的头插来实现栈的先进后出的特点 /***************************************************** Author:Si ...

  10. 搭建单机版spark

    二.下载软件 JDK,Scala,SBT,Maven 版本信息如下: JDK jdk-7u79-linux-x64.gz Scala scala-2.10.5.tgz 三.解压上述文件并进行环境变量配 ...