vue全局组件_vue全局组件如何通过方法调用 - CSDN
精华内容
参与话题
  • Vue全局组件与局部组件的区别

    千次阅读 2018-06-14 08:37:41
    -- 全局组件模板father模板 --> <template id="father"> <div> <h3>这是{{name}}</h1> <div> <p>这是{...

    1、组件声明

    <!-- 全局组件模板father模板 -->
    <template id="father">
        <div>
             <h3>这是{{name}}</h1>
             <div>
                 <p>这是{{data}}</p>
             </div>
        </div>
    </template>
    var FATHER = {
        template: "#father",
        data: function() {
             return {
                  name: "一个全局组件-模板-",
                  data: "数据:18892087118"
             }
         }
     };

    2、组件注册

    Vue.component('father', FATHER);

    3、组件挂载

    <h5>全局组件1</h5>
    <father></father>

    4、组件实例

    <!DOCTYPE html>
    <html>
    <head>
        <title>vue2.0 --- 局部组件与全局组件</title>
    </head>
    
    <body>
        <h3>vue2.0局部组件与全局组件</h3>
    
        <div id='app'>
            <h5>局部组件</h5>
            <fatherlocal></fatherlocal>
            <hr>
    
            <h5>全局组件1</h5>
            <father></father>
            <hr>
    
            <h5>全局组件2</h5>
            <child :fromfather='giveData'></child>
        </div>
    
        <!-- 局部组件模板fatherlocal -->
        <template id="father-local">
            <div>
                <h3>这是{{name}}</h1>
                <div>
                    <p>这是{{data}}</p>
                </div>
            </div>
        </template>
    
        <!-- 全局组件模板father -->
        <template id="father">
            <div>
                <h3>这是{{name}}</h1>
                <div>
                    <p>这是{{data}}</p>
                </div>
            </div>
        </template>
    
        <template id="child">
            <div>
                <h3>这是{{name}}</h3>
                <div>
                    <p>{{cmsgtwo}}</p>
                    <p>{{cmsg}}</p>
                    <p>{{fromfather}}</p>
                    <p>{{fromfather.fmsg}}</p>
                    <p><input type="button" value="按钮" @click=" "></p>
                </div>
            </div>
        </template>
    
        <script src="vue_2.2.2_vue.min.js"></script>
        <script type="text/javascript">
            // 定义组件
            var FATHER = {
                template: "#father",
                data: function() {
                    return {
                        name: "一个全局组件-模板-",
                        data: "数据:18892087118"
                    }
                }
            };
    
            var CHILD = {
                template: "#child",
                data: function() {
                    return {
                        name: "子组件",
                        cmsg: "子组件里的第一个数据",
                        cmsgtwo: "子组件里的第二个数据"
                    }
                },
                methods: {
                    change: function() {
                        this.fromfather.fmsg = "子组件数据被更改了"
                    }
                },
                mounted: function() {
                    this.cmsg = this.fromfather;
                },
                props: ["fromfather"],
            };
    
            // 注册组件
            Vue.component('father', FATHER);
            Vue.component("child", CHILD);
    
            var vm = new Vue({
                data: {
                    fmsg: "data里的数据",
                    giveData: {
                        fmsg: "这是父组件里的数据"
                    }
                },
                methods: {},
                // 局部组件fatherlocal
                components: {
                    'fatherlocal': {
                        template: '#father-local',
                        data: function() {
                            return {
                                name: "局部-父组件",
                                data: "局部-父组件里的数据"
                            }
                        }
                    }
                }
            }).$mount('#app');
        </script>
    </body>
    </html>

    6、特殊的属性is

    当使用 DOM 作为模板时 (例如,将el选项挂载到一个已存在的元素上),你会受到 HTML 的一些限制,因为 Vue 只有在浏览器解析和标准化 HTML 后才能获取模板内容。尤其像这些元素<ul><ol><table><select>限制了能被它包裹的元素,而一些像<option>这样的元素只能出现在某些其它元素内部。

    自定义组件<my-row>被认为是无效的内容,因此在渲染的时候会导致错误。变通的方案是使用特殊的is属性:

    <body> 
        <div id="app1"> 
            <ul>   
                <li is="my-component"></li> 
            </ul> 
        </div> 
            
        <script>  
            Vue.component("my-component",{    
                template:"<h1>{{message}}</h1>",    
                data:function(){      
                    return {        
                        message:"hello world"      
                    }    
                }  
            });  
    
            new Vue({    
                el:"#app1"  
                }) 
        </script> 
    </body>

    展开全文
  • Vue全局组件

    2020-01-11 11:05:33
    微信订阅号:Rabbit_svip ...在 components 目录下,创建一个组件,这里我创建的组件名为:Home.vue 微信订阅号:Rabbit_svip 2、 编写 Home.vue 组件的内容。 <template> 值得注意的...
        
    7275569-f893c5e041eccab2.png
    微信订阅号:Rabbit_svip



    使用cli提供的脚手架创建一个项目。

    1、

    在 src 目录下新建一个目录,名为 components 。在 components 目录下,创建一个组件,这里我创建的组件名为:Home.vue

    7275569-1c5de72e5beb77a2
    微信订阅号:Rabbit_svip



    2、

    编写 Home.vue 组件的内容。

    <template>
    

    值得注意的是,每个组件只能有一个根元素。



    3、

    在 main.js 中,引入 Home.vue 并注册。

    import Vue from 'vue'
    

    上面的代码,第3行是引入 Home.vue 组件,第5行是全局注册。可以说,通常在 main.js 里注册的组件都是全局组件。

    这里,把组件命名为 app-rabbit



    4、

    在 App.vue 中使用。

    <template>
    

    最后贴个图吧

    7275569-e781773162a23d92
    微信订阅号:Rabbit_svip
    7275569-99303c5d73564bb3
    微信订阅号:Rabbit_svip
    展开全文
  • vue全局组件和局部组件的写法

    万次阅读 2018-04-18 10:37:44
    vue组件有两种,一种是全局组件,一种是局部组件。整个项目经常用到的用全局写法,用到比较少的专供特定页面用的使用局部组件。全局组件引入写法:在项目的main.js中:import Vue from 'vue'; import MyComponent ...

    vue组件有两种,一种是全局组件,一种是局部组件。整个项目经常用到的用全局写法,用到比较少的专供特定页面用的使用局部组件。

    全局组件引入写法:在项目的main.js中:

    import Vue from 'vue';
    import MyComponent from '@/components/MyComponent.vue'; // 导入自己写的组件文件
    
    Vue.use(MyComponent); // 自定义全局组件的时候需要Vue.use();
    
    Vue.component('my-component', MyComponent); //初始化组件
    
    new Vue({
      el: '#app',
      router,
      components: {
        App,
        MyComponent
      },
      template: '<App/>',
    }); 

    局部组件引入写法:在需要使用组件的a.vue文件中:

    <template>
    </template>
    
    <script>
    import MyComponent from '@/components/MyComponent.vue';
    export default {
      components: {MyComponent}, // 直接初始化就可以啦,不需要Vue.use();
      data() {},
      methods: {}
    };
    </script>
    
    <style lang="scss" scoped>
    </style> 

    下面附上自定义组件的MyComponent.vue文件代码:

    <template>
      <div>
        <a @click="methods1()"></a>
      </div>
    </template>
    <script>
    import { MessageBox } from 'mint-ui';
    export default {
      data () { // 组件内参数定义在data中
        return {
          data1: {}
        };
      },
      props: { // 组件传参使用props
        value1: String,
        value2: Number
      },
      methods: { // 组件的计算方法
        methods1 () {
        }
      }
    };
    </script>
    <style lang="scss" scoped>
    </style>

    展开全文
  • 自定义vue全局组件use的使用

    千次阅读 2017-11-17 15:05:19
    1.目录结构2.Loading.vue(这里可以写你想要的loading样式)3.Loading.js(主要部分是Loading.js里的install方法)4.main.js(起到引入的作用)5.App.vue完成上面几步就能实现用自定义vue全局组件

    1.目录结构

    这里写图片描述

    2.Loading.vue(这里可以写你想要的loading样式)

    这里写图片描述

    3.Loading.js(主要部分是Loading.js里的install方法)

    这里写图片描述

    4.main.js(起到引入的作用)

    这里写图片描述

    5.App.vue

    这里写图片描述

    完成上面几步就能实现用自定义vue全局组件了

    展开全文
  • Vue全局添加组件

    2019-03-14 15:19:24
    在项目中有时需要反复用到如区域选择器等组件,每次使用时都需要在对应的vue中添加import,并在component中注册,为了避免多次书写引用代码,可以自定义全局组件,只需要在main.js中一次性注册在vue项目中,可以...
  • 在项目中需要用到一个确认删除的弹窗,因为有多个地方需要用到这个提示框,不想每次用的时候都要引入一次这个弹窗组件,因此把它做成了一个全局组件;这里使用了element UI的dialog来实现的弹窗效果。 操作步骤如下...
  • vue 全局组件

    2020-04-27 18:27:58
    //main.js import components from './components' ...Vue.use(components) //src/components/index.js import loading from './loading' import model from './model' import headerTop from './headerTop' imp...
  • vue组件全局注册 写法和用法

    万次阅读 2018-08-21 16:56:03
    当然本人能力实在有限写出的文章可能和大神们不能比拟 如果有什么不专业甚至是错误的地方还请大家指正!...在网上经常看到有朋友在问自己能不能写vue组件 如果可以怎么应用到自己的项目之中呢!我觉得吧...
  • Vue组件之入门:全局组件三种定义

    千次阅读 2018-11-13 15:45:58
    不论我们使用哪种方式创建出来的组件,组件中的template属性指向的模板内容中,必须有且... 在使用Vue.extend配合Vue.component定义全局组件时,Vue.extend里面定义template模板,而Vue.component里面是要注册一个...
  • VUE全局组件的封装与使用方法

    千次阅读 2019-08-23 17:03:00
    最近整理了一下vue的知识点,正好今天有些时间把VUE全局组件的封装与使用方法写一下。 1.自定义组件 <template> <div class="breadcrumb"> 面包屑 <slot/> <!-- 插槽 --> </div...
  • 全局组件注册后,任何vue实例都可以用: &amp;amp;lt;div id=&amp;quot;v1&amp;quot;&amp;amp;gt; &amp;amp;lt;first-component&amp;amp;gt;&amp;amp;lt;/first-component&amp;...
  • vue全局组件的引入

    2020-06-18 09:33:18
    1,创建组件 在自定义组件的文件夹下(layout)创建组件,并创建index.js文件, 2,导出组件 在index.js内导出组件(可以同时注册多个组件),代码如下: import QRcode from '@/components/layout/QRcode....
  • Vue全局组件及传值

    千次阅读 2018-03-21 10:45:40
    &lt;!doctype html&gt; &lt;html&gt; &lt;...全局组件及传值&lt;/title&gt; &lt;script src="https://cdn.jsdelivr.net/npm/vue@2.5.13/dist/vue.js"&
  • Vue全局组件的使用

    2019-04-02 14:50:22
    vue组件化是非常方便的,能节省很多代码量,那么vue全局组件是如何使用呢,首先先声明一下,然后将自定义的组件标签插入到代码中。下面是一个小案例: <!DOCTYPE html> <html> <head> <...
  • vue全局组件自动注册

    千次阅读 2019-11-14 11:54:23
    组件的目录结构: 子组件的name必须写 自动全局注册: 1.要新建个global文件夹,里面的js文件是对各个子组件的导入导出操作。 2.components下新建index.js文件 index.js对global下各个导出的组件进行全局自动注册...
  • &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Title&lt;/title&...
  • Vue实例中的配置项: data、computed、watch、methods 以及生命周期钩子函数(created,mounted)等Vue 全局组件 &lt;body&gt; &lt;div id="app"&gt; &lt;home&gt;&lt;/home...
  • 转载于:https://www.cnblogs.com/tenro/p/7571480.html
  • 1.在src目录下创建一个global.js文件,用来注册view 2.global.js的内容如下,我扫描了两个目录,只要这两个目录下有index.vue的文件就自动注册。 3.并在main.js里引入 4、直接使用 ......
  • Vue注册全局组件-弹窗组件

    千次阅读 2019-09-01 21:06:23
    在src目录下新建components文件夹 ...1.新建module文件夹,然后新建v-alert.vue <template> <transition name="fade"> <div class="v-alert g-center" :style="{zIndex}"> <div ...
1 2 3 4 5 ... 20
收藏数 50,572
精华内容 20,228
关键字:

vue全局组件