VUE注册局部组件

    // 局部组件命名规范
    /*
      1文件夹名大驼峰 MyLocalBtn.vue
      2 使用的时候 将驼峰转化为横杠 <my-local-btn></my-local-btn>
    */ 
MyLocalBtn.vue局部组件
<template>
    <div>
        <div>我输局部组件---{{valuea}}</div>
    </div>
</template>

<script>
    export default {
        name:"my-local-btn",
        data(){
            return{

            }
        },
        props:["valuea"]

    }

</script>

在某个组件中使用局部组件

<template>
    <div>
        <!-- 使用局部组件 -->
        <my-local-btn valuea="新增数据"></my-local-btn>
    </div>
</template>

<script>
import MyLocalBtn from   "../../components/cuscom/MyLocalBtn";  //引入局部组件
    export default {
        data(){
            return{

            }
        },
        components: {
            ‘my-local-btn‘: MyLocalBtn  //引入局部组件 通过components组件
        },

    }
</script>

原文地址:https://www.cnblogs.com/IwishIcould/p/11693049.html

时间: 2024-07-30 10:42:06

VUE注册局部组件的相关文章

vue中局部组件的使用

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="app"> {{msg}} </div> <script src="vue.js">

vue 注册全局组件

注册全局组件有啥好处呢? 提高代码的复用性:哪里需要写哪里,贼方便,就写一个标签:减少代码量:可以再配合slot一起使用,咦~~,舒服 为了让整个项目的可读性,我创建一个文件统一存放全局组件 1.创建common文件夹,文件夹用来存放我们所需要的注册的全局组件 此时我们需要一个index.js文件.上代码 [脑补]我已经再common文件夹下创建好了我引入的这两个文件 这里值得注意的是tabs.name 和 tabItems.name 是啥玩意呀! 诶呀  就是组件命名呗   嗯?需要注意吗?

优雅的处理vue注册全局组件

使用情景: 有频繁使用的组件 需要进行全局注册 可以将这些组件都放在components下同一个文件夹下,在此文件夹中建立 一个js文件 代码如下: import Vue from 'vue'; // 修改文件名首字母大写 function changeComponentName (str) { return str.charAt(0).toUpperCase() + str.slice(1); } // 获取当前文件夹下的的组件 // require.context 三个参数 第一个表示读取文

register.vue 注册页面组件

<template> <div class="wrapper"> <navigate :menuList="menuList" :tabIndexList="tabIndexList" :tabIndex="tabIndex" @tabIndexListNav="tabIndexListNav"></navigate> <registerBasicInf

Vue 局部组件和全局组件的使用

1 <template> 2 <div id="app"> 3 <!--<img alt="Vue logo" src="./assets/logo.png">--> 4 <!--<HelloWorld msg="你妹的是你吗?"/>--> 5 <mtmp></mtmp> 6 <h1>{{ title}}</h1&

Vue 什么是组件

Vue.js组件 组件的作用:组件是自定义元素,可扩展html元素,封装可复用的代码. 组件的注册一定要在初始化根实例之前,负责组件是不起作用的. 全局组件在初始化实例的时候被使用 局部组件仅在实例/组件作用域中可用 1.组件的注册 1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="UTF-8"> 5 <title></tit

VueJS组件之全局组件与局部组件

全局组件 所有实例都能用全局组件. HTML <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Vue 测试实例 - 菜鸟教程(runoob.com)</title> <script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>

vue引入全局组件和局部组件的区别以及全局注册公共函数

一,先看看全局组件的引用,就拿最常用的全局的暂无数据来举例,看看全局的是如何实现的. Step1,首先在components创建一个公共的目录,NoDatas目录里边包含index.vue和index.js,index.vue用来写公共的页面,index.js用来导出这个组件. <template> <!-- NoDataWords 可以灵活控制每个页面显示的内容 --> <!-- NoDataHeight 可以灵活控制每个页面的高度 --> <!-- 如果你的页

vue的全局组件和局部组件

<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>全局组件.局部组件</title> <script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script></head><body><div id="a