[转] 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:#fbb;
text-align:center;
}
</style>
2.其次在同一目录下建立index.js文件,在这个文件中使用install方法来全局注册该组件

import component from ‘./Cmponent.vue‘
const component = {
install:function(Vue){
Vue.component(‘component-name‘,component)
} //‘component-name‘这就是后面可以使用的组件的名字,install是默认的一个方法

}
// 导出该组件
export default component
3.使用

// 只要在index.js里规定了install方法,就可以向其他ui组件库那样,使用Vue.use()来全局使用
import loading from ‘./index.js‘

Vue.use(loading)

<template>
<div>
<component-name></component-name>
</div>
</template>

原文地址:https://www.cnblogs.com/chris-oil/p/9949931.html

时间: 2024-10-07 09:25:59

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

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自定义组件v-model

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

vue自定义组件并使用

以下是使用自己写的一个简单的文件上传框为例 时间:20180710 编写:luoxm qq:1085656523 1.自定义组件结构(一个js文件,一个vue文件),最好单独放一个文件 2.upload.vue 内容   其中,action是父组件传递给子组件的参数,使用props进行接收,并关联到action中. props 父级传给组件的数据   然后用  $emit('方法名',数据) 返回父级数据 3.index.js内容 index.js的内容分成3个步骤(缺一不可): a).引入vu

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自定义组件 (两种之二)弹窗为例

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

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

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

Vue自定义v-model实现Vue的双向数据绑定--Vue高级特性

Vue高级特性 一.自定义v-model实现Vue的双向数据绑定 父组件中 <p>{{name}}</p> <custormModel v-model="name" /> data() { return { // 组件 custormModel 中的 input 输入改变,绑定到了这里,实现双向绑定 name: '颜色' } }, components: { custormModel } 组件custormModel <input type=&

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

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

Vue自定义组件

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