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. 【记录】linux 常用命令梳理

    命令梳理 下载文件 [wget 是一个十分常用命令行下载工具,多数Linux发行版本都默认包含这个工具] wget -c [zip路径等] #断点续传,如果下载中断,那么连接恢复时会从上次断点开始下载 ...

  2. Codeforces 1163E 高斯消元 + dfs

    题意:给你一个集合,让你构造一个长度尽量长的排列,使得排列中任意相邻两个位置的数XOR后是集合中的数. 思路:我们考虑枚举i, 然后判断集合中所有小于1 << i的数是否可以构成一组异或空 ...

  3. uva658 dijkstra+状态压缩

    题目大意: 假定有n个潜在的bug和m个补丁,每个补丁用长为n的字符串表示.首先输入bug数目以及补丁数目.然后就是对m 个补丁的描述,共有m行.每行首先是一个整数,表明打该补丁所需要的时间.然后是两 ...

  4. Qt 【Qlistview + delegate 为item重写个关闭按钮】

    效果图是这样的. 实现的过程是listview + delegate 本身我想是用listwidget + delegate[网上查询到不可实现] 之前也试过在item中添加布局跟控件,但是在点击的时 ...

  5. 使用cordova,使html5也能像IOS,Android那样可以 调取手机的相机拍照功能

    一,我们在使用html5的技术开发手机app时,并不能像IOS,Android那样可以调取手机原生的相机功能,这是我们就要借助一些插件来时实现. 二,安装Cordoba的相机插件 1.在文件目录下,使 ...

  6. leetcood学习笔记-9

    题目描述 方法一:转换为字符串 class Solution: def isPalindrome(self, x: int) -> bool: if x<0: return False e ...

  7. 【原理】RabbitMQ架构图

    Broker:它提供一种传输服务,它的角色就是维护一条从生产者到消费者的路线,保证数据能按照指定的方式进行传输, Exchange:消息交换机,它指定消息按什么规则,路由到哪个队列. Queue:消息 ...

  8. 【Flutter学习】基本组件之基本列表ListView组件

    一,概述 列表是前端最常见的需求. 在flutter中,用ListView来显示列表页,支持垂直和水平方向展示,通过一个属性我们就可以控制其方向,列别有以下分类 水平列表 垂直列表 数据量非常大的列表 ...

  9. [Luogu P4178]Tree 题解(点分治+平衡树)

    题目大意 给定一棵树,边带权,问有多少点对满足二者间距离$\leq K$,$n \leq 40000$. 题解 点分治专题首杀!$Jackpot!$ (本来看着题意比较简单想捡个软柿子捏,结果手断了… ...

  10. flutter 使用keyboard_actions 关闭ios键盘

    项目中登录 输入账号密码 弹出的键盘 关闭不了,从而 引来一些问题, 1,第一次关闭 项目是在 最外层包裹一层,点击的时候进行关闭, return Scaffold( resizeToAvoidBot ...