1、创建组件  demo.vue,内容如下:

<template>
<div>
<input
type="button"
:value="name"
@click="btnClickHandler"
/>
</div>
</template> <script>
export default {
data () {
return {}
},
props: ['name'],
methods: {
btnClickHandler: function () {
// this.$emit('btnClick') 用于执行父组件中绑定的事件
this.$emit('btnClick')
// 还可以执行单独的组件自己的方法
alert('子组件的点击')
}
}
}
</script> <!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang='scss'>
</style>

ps.

  a.data最好写返回值,即使是空对象,否则调试时,可以运行,但浏览器会报错,一片红看的不难受么

  b.props用于参数的传递

  c.自定义事件,并将自定义事件绑定到button的单击事件中,自定义事件添加代码:this.$emit('btnClick'),此段代码的作用是:在父组件使用绑定自定义事件时,执行父组件中绑定的事件

2、使用<template>

  <div id="app">
<sw-header name="abc" @btnClick="click"></sw-header>
<router-view />
</div>
</template> <script>
import swHeader from './components/demo' export default {
name: 'App',
components: {
swHeader
},
methods: {
click: function () {
alert('父组件的点击事件')
}
}
}
</script> <style lang="scss">
/*去除浏览器默认样式*/
@import './assets/reset.css';
/*sass变量*/
$background: #ccc; </style>

ps.

  a.引用组件

  b.注册组件

  c.参数传递:按照html的普通属性使用即可将参数传递给组件

  d.定义事件,并绑定到组件的自定义事件中

折腾vue--vue自定义组件(三)的更多相关文章

  1. vue中自定义组件(插件)

    vue中自定义组件(插件) 原创 2017年01月04日 22:46:43 标签: 插件 在vue项目中,可以自定义组件像vue-resource一样使用Vue.use()方法来使用,具体实现方法: ...

  2. 【VUE】自定义组件

    [VUE]自定义组件 转载: ============================================ ======================================== ...

  3. vue之自定义组件

    除了核心功能默认内置的指令外,vue也允许用户注册自定义指令.虽然在vue2.0中,代码复用和抽象的主要形式是组件,但是有些情况下,我们仍需要对普通DOM元素进行底层操作,这个时候就需要用到自定义指令 ...

  4. 编程小白入门分享五:Vue的自定义组件

    前言 上篇博客简单介绍了vue,本篇博客要在对vue有一定了解后,才可以比较容易理解自定义组件.想要封装好一个组件,一定要熟练掌握这三个技能,父组件 -> 子组件传值(props).子组件 -& ...

  5. vue的自定义组件和组件传值

    <div id="app"> <div>{{pmessage}}</div> //父组件 <child :message="pm ...

  6. vue 相邻自定义组件渲染错误正确的打开方式

    话不多说看问题: 当封装自定义组件时例如(自定义下拉列表)两个相同的组件在多次v-if变化时偶尔会发生渲染错误,明明赋值正确但是组建中的ajax方法可能返回的数据乱掉,或者其他神逻辑错误. 经过查询发 ...

  7. 四、vue基础--自定义组件

    1.语法:Vue.component("组件名字",{data,template}),代码如下: a. data: 必须是一个函数,有一个返回值.和vue里面的使用方法一样 b. ...

  8. vue怎么自定义组件

    我们在搭建好的手脚架中 进行使用 一.在src =>components => 创建XXbtn文件夹用来存放你的组件 =>在创建一个vue的文件 . 二.在src => com ...

  9. vue发布自定义组件到npm

    一.使用 vue create currentdatetime创建项目(可查考https://cli.vuejs.org/zh/guide/creating-a-project.html),创建成功后 ...

  10. vue 全局自定义组件

    1.vue文件 <template> <div style="position: absolute;bottom: 10px;text-align: center;widt ...

随机推荐

  1. 腾讯云ubuntu服务器无法以root身份ssh连接

    在腾讯云上拿到的Ubuntu主机分配给的用户是ubuntu用户,并不是root用户,而阿里云上拿到的Ubuntu主机分配给的用户就是root用户.如果没有root用户权限做事情会变得麻烦,每次做什么都 ...

  2. springBoot 整合 dubbo 遇到的坑

    一.注意springBoot 和 dubbo 之间版本的问题 <?xml version="1.0" encoding="UTF-8"?> < ...

  3. spring源码系列博文总索引

    一 目录 准备 1 使用Gradle构建spring5源码的一些坑和步骤 IOC模块 1spring IOC接口设计分析 2 spring IOC容器实现类分析 3 spring IOC特定场景源码步 ...

  4. Vmware14 开机黑屏或者以独占方式锁定此配置文件失败等问题解决办法

    把VMware14版本卸载掉,然后重装一个12版本的 打开之前创建的虚拟机,提示版本不兼容, 打开配置文件: 修改版本为重装的版本,比如12 然后编辑虚拟机设置指定一个系统,比如centos,即可 就 ...

  5. Docker深入浅出系列 | Image实战演练

    目录 课程目标 Container与Image核心知识回顾 制作Docker Image的两种方式 Dockerfile常用指令 Image实战篇 通过Dockerfile制作Image 通过Dock ...

  6. OpenDJ入门 | 5分钟快速入门Forgerock DS

    本教程为了让大家快速体验,故不做深入讲解,详细内容请留意后续进阶教程 介绍 OpenDJ是一个目录服务器,它实现了各种轻量级目录访问协议和相关标准,包括完全符合LDAPv3,但也支持目录服务标记语言( ...

  7. The import java.io cannot be resolved (类库无法解析的问题解决 )

    导入一个新项目后常会出现 The import java.io cannot be resolved String cannot be resolved to a type 其原因在于没有导入需要的包 ...

  8. Codeforces_540_C

    http://codeforces.com/problemset/problem/540/C 简单bfs,注意结束条件. #include<iostream> #include<cs ...

  9. Codeforces 1092 D2 Great Vova Wall (Version 2) (栈)

    题意: 给一排砖,每列的高度$a_i$,问是否可以放1*2的砖,使得n列高度一样,砖只能横着放 思路: 每两个相邻的高度相同的砖可以变成大于等于它的高度的任意高度 所以像这样的 123321 是不满足 ...

  10. A simple way to monitor SQL server SQL performance.

    This is all begins from a mail. ... Dear sir: This is liulei. Thanks for your help about last PM for ...