vue自定义组件并使用

以下是使用自己写的一个简单的文件上传框为例

时间：20180710

编写：luoxm

qq：1085656523

1、自定义组件结构（一个js文件，一个vue文件），最好单独放一个文件

2、upload.vue 内容

　　其中，action是父组件传递给子组件的参数，使用props进行接收，并关联到action中。　　

　　props 父级传给组件的数据然后用 $emit(‘方法名‘，数据) 返回父级数据

3、index.js内容

　　index.js的内容分成3个步骤(缺一不可)：

　　　　a）、引入vue组件

　　　　b）、进行全局安装

　　　　c）、导出组件

以上是完成一个子组件定义。

接下来进行组件的使用

4、在main.js文件中，导入自定义的组件，并进行Vue.use()

5、在需要使用该组件的地方进行调用

其中，:action-url=‘actionUrl‘中的actionUrl值，在data中进行定义即可

原文地址：https://www.cnblogs.com/luoxuemei/p/9289897.html

时间： 2024-10-09 00:20:23

vue自定义组件并使用的相关文章

vue自定义组件v-model

一个组件上的`v-model`默认会利用名为`value`的prop(属性)和名为input的事件,但是像单选框.复选框等类型的输入控件可能会将`value`特性用于不同的目的.这时候我们可以在定义组件的时候,通过设置`model`选项可以用来实现不同的处理方式. 在创建组件的时候,添加`model`属性,其中要包含两个属性配置,分别是: event:什么时候触发v-model行为 prop:定义传递给v-model的那个变量,绑定到哪个属性值上下面是实现计数器作用的代码: <!DOCTY

[转] vue自定义组件(通过Vue.use()来使用)即install的使用

在vue项目中,我们可以自定义组件,像element-ui一样使用Vue.use()方法来使用,具体实现方法: 1.首先新建一个Cmponent.vue文件 // Cmponent.vue<template> <div> 我是组件 </div></template> <script> export default { }</script> <style scoped> div{ font-size:40px; color:

vue自定义组件(通过Vue.use()来使用)即install的使用

在vue项目中,我们可以自定义组件,像element-ui一样使用Vue.use()方法来使用,具体实现方法: 1.首先新建一个loading.vue文件 // Cmponent.vue <template> <div> ...loading </div> </template> <script> export default { } </script> <style scoped> div{ font-size:40px

Vue 自定义组件

html: :msg="btn.sure"========>这种适用于props {{btn.sure}}===========>这种使用于slot插槽 1 <nel-btn class="VuePrimaryBtn" :msg="btn.sure">{{btn.sure}}</nel-btn> 2 <nel-btn class="VueDangerBtn" :msg="bt

[转] vue自定义组件中的v-model简单解释

在使用iview框架的时候,经常会看到组件用v-model双向绑定数据,与传统步骤父组件通过props传值子组件,子组件发送$emit来修改值相比,这种方式避免操作子组件的同时再操作父组件,显得子组件的封装效果更好.所以,个人认为,我们自己封装组件也应该有这样的思维,父组件通过slot或者props传值,由子组件完成一些效果,再抛出必要的事件让父组件接受,这样组件的可复用性就很强,有利于多次使用. v-model指令是什么? 刚刚提到,iview通过v-model双向绑定数据,所以首先我们要明白

vue 自定义组件 v-model双向绑定、父子组件同步通信

父子组件通信,都是单项的,很多时候需要双向通信.方法如下: 1.父组件使用:msg.sync="aa" 子组件使用$emit('update:msg', 'msg改变后的值xxx') 2.父组件传值直接传对象,子组件收到对象后可随意改变对象的属性,但不能改变对象本身. 3.父组件使用: v-model 第一种曾经被废除过,由于维护成本的原因被删掉,但经过证实,确实有存在的意义,又被加上. 第一种: 父组件: <template> <div> <aa cl

vue自定义组件 (两种之二)弹窗为例

方式: 利用js代码,在必要时候动态弹出组件, 而不需要Vue.use,也必在页面上写组件. 依据: vm.$mount( [elementOrSelector] ) 参数: {Element | string} [elementOrSelector] {boolean} [hydrating] 返回值:vm - 实例自身用法: 如果 Vue 实例在实例化时没有收到 el 选项,则它处于“未挂载”状态,没有关联的 DOM 元素.可以使用 vm.$mount() 手动地挂载一个未挂载的实例. 如

Vue自定义组件

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>组件定义</title> <link rel="stylesheet" type="text/css" href="css/animate.css"> </head> <script type="

vue 自定义组件的自定义属性

1 <auto-com :value="value"></auto-com> //带 : 的属性传入的是动态的值 2 <auto-com value="value"></auto-com> //不带 : 的属性传入的是静态的值,即字符串 3 4 var vm = new Vue({ 5 el:'#app', 6 data:{ 7 value: 'zzzzzz' 8 }, 9 render:ele=>ele(App