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. ios--->tableView的估算高度的作用

    ios中tableView的估算高度的作用 在ios7之后,tableView有了估算高度的这个概念及相关属性和方法:它的作用和使用场景是什么? 在tableview加载完数据渲染之后,考虑到滚动条的 ...

  2. 小程序--->scroll-view组件不能触发相应滚动事件

    小程序scroll-view组件不能触发相应滚动事件 在制作加载更多时会发现不能触发相应事件,一般情况下首先要查看两个必要的属性scroll-view的高度是否设置,第二就是scroll-view的滚 ...

  3. 尝试用 Python 写了个病毒传播模拟程序

    病毒扩散仿真程序,用 python 也可以. 概述 事情是这样的,B 站 UP 主 @ele 实验室,写了一个简单的疫情传播仿真程序,告诉大家在家待着的重要性,视频相信大家都看过了,并且 UP 主也放 ...

  4. C语言实现银行家算法

    #include <stdio.h> #include <stdlib.h> #include <string.h> #include <stdbool.h& ...

  5. 基于TensorFlow的MNIST手写数字识别-深入

    构建多层卷积神经网络时需要多组W和偏移项b,我们封装2个方法来产生W和b 初级MNIST中用0初始化W和b,这里用噪声初始化进行对称打破,防止产生梯度0,同时用一个小的正值来初始化b避免dead ne ...

  6. HDU_2191_多重背包

    http://acm.hdu.edu.cn/showproblem.php?pid=2191 简单多重背包题. #include<iostream> #include<cstdio& ...

  7. My introduction

    Vistors 访客统计

  8. 磁盘文件系统管理与LVM逻辑卷

    一.磁盘以及分区管理 无论是Linux系统还是Windows系统.当现有硬盘的规划不能满足当前需求时.我们就需要将其重新规划和调整 实现上述操作我们就需要用到fdisk磁盘及分区管理工具.此工具是大多 ...

  9. 2020.2.22 bzoj5336 party

    #include<iostream> #include<cstdio> #include<cstring> #include<cctype> #incl ...

  10. docker:搭建ELK 开源日志分析系统

    ELK 是由三部分组成的一套日志分析系统, Elasticsearch: 基于json分析搜索引擎,Elasticsearch是个开源分布式搜索引擎,它的特点有:分布式,零配置,自动发现,索引自动分片 ...