精华内容
下载资源
问答
  • Vue全局组件与局部组件的区别
    千次阅读
    2018-06-14 08:37:41

    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全局组件与局部组件的区别,通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
  • 局组件和局部组件 1.先定义组件 Vue.component(‘组件名’, { 组件模板对象 }) 注意: 组件名不要使用原生的标签名, 若组件名定义时用的是驼峰命名法, 则调用时用中划线分割后小写 例如: 组件–>mtText 使用时–> ...
  • 局部注册,通过使用组件实例选项注册,可以使组件仅在另一个组件或者实例的作用域中可用: 全局组件 js Vue.component('tab-title',{ props:['title'], template:'$emit(\>{{title}}</li>' ...局部组件demo:
  • 主要介绍了vue实现局部刷新的实现示例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
  • 主要介绍了npm包全局安装和局部安装,需要的朋友可以参考下
  • 主要介绍了基于Vue全局组件与局部组件的区别说明,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • 这两天学习了Vue.js 感觉组件这个地方知识点挺多的,而且很重要,所以,今天添加一点小笔记。 首先Vue组件的使用有3个步骤,创建组件构造器,注册组件,使用组件3个方面。 代码演示如下: <!DOCTYPE html> <...
  • 主要介绍了VUE注册全局组件和局部组件过程解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
  • vue组件有两种,一种是全局组件,一种是局部组件。整个项目经常用到的用全局写法,用到比较少的专供特定页面用的使用局部组件。 one—-全局组件引入写法:在项目的main.js中: 第一种,在main.js直接写template:’ ...
  • 4,vue-cli 组件知识: 4.1 全局注册组件 先在main.js里这样写。 然后在App.vue里面 的template模板里 直接使用 <users></users>加载使用即可 4.2局部组件引入方法 就是在App.vue里引入。 ...

    4,vue-cli 组件知识:
    4.1 全局注册组件
    在这里插入图片描述
    先在main.js里这样写。 然后在App.vue里面 的template模板里 直接使用 <users></users>加载使用即可
    在这里插入图片描述
    4.2局部组件引入方法 就是在App.vue里引入。
    在这里插入图片描述

    展开全文
  • 主要介绍了vue directive定义全局和局部指令及指令简写,本文分步骤给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
  • vue全局组件和局部组件的写法

    千次阅读 2019-02-13 19:34:30
    今天在学习vue的时候遇到了一个让我纠结的地方,那就是vue组件的全局注册到底该怎么用,我查阅资料发现众说纷纭……晚上看到了这篇文章,经过实践后发现确实可行,...我觉得吧这个事儿就用煮大米饭是一个道理的 ...

    转自https://blog.csdn.net/ywl570717586/article/details/79984909 感谢博主分享

    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全局组件与局部组件的使用方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • 全局组件和局部组件 1.先定义组件 Vue.component(‘组件名’, { 组件模板对象 }) 注意: 组件名不要使用原生的标签名, 若组件名定义时用的是驼峰命名法, 则调用时用中划线分割后小写 例如: 组件--&...

    https://blog.csdn.net/weixin_44389107/article/details/89192803
    全局组件和局部组件

    • 1.先定义组件 Vue.component(‘组件名’, { 组件模板对象 })

    • 注意: 组件名不要使用原生的标签名, 若组件名定义时用的是驼峰命名法, 则调用时用中划线分割后小写

    •                   例如: 组件-->mtText   使用时-->   <my-text></my-text>
      
    • 2.配置组件的模板 注意: 组件的模板内容有且只有一个根元素

    • 3.在视图层里调用 ,用双标签

    • 4.组件是一个独立的作用域, 也可以看成一个特殊的vue实例, 可以有data, methods,computed等等

    • 注意: 组件的data是函数, 函数中需要返回一个对象作为组件的data
      全局组件案例

       <body>
      	<div id="app">
          <my-component></my-component>
      	`在这里插入代码片` </div>
      	  <script src="lib/vue-2.4.0.js"></script>
      <script>
      //全局组件
          Vue.component('myComponent',{
              //1.组件的内容/模板
              template: '<div><div>头部组件</div><h1 @click="fn">呵呵{{msg}}</h1></div>',
              data(){
                  return {
                      msg:'hello,组件'
                  }
              },
              methods:{
                  fn(){
                      console.log(this.msg);
                  }
              }
          })
          let vm = new Vue({
              el:"#app",
              data:{
              },
              methods:{
      
              },
      
          })
      </script>
      </body>
      

    局部组件案例

    	<body>
    	<div id="app">
    	    <my-component></my-component>
    	    <my-test></my-test>
    	</div>
    	<template id="box1">
    	    <h1>haha</h1>
    	</template>
    	<template id="box2">
    	    <div>
    	        <ul>
    	            <li v-for="item in arr">
    	                {{ item }}
    	            </li>
    	        </ul>
    	    </div>
    	</template>
    	<script src="lib/vue-2.4.0.js"></script>
    	<script>
    	let vm = new Vue({
    	        el:"#app",
    	        data:{
    	        },
    	        methods:{
    	
    	        },
    	        //局部子组件
    	        components:{
    	            // 组件名: {配置项}
    	            "myComponent":{
    	                template:'#box1',
    	                data(){
    	                    return {
    	                        msg:"哈哈"
    	                    }
    	                }
    	            },
    	            "myTest":{
    	                template:"#box2",
    	                data(){
    	                    return {
    	                        arr:[1,2,3,4]
    	                    }
    	                }
    	            }
    	        }
    	    })
    	</script>
    	</body>
    

    组件切换:法一

    		<body>
    		<div id="app">
    		    <a href="" @click.prevent="flag=true">登录</a>
    		    <a href="" @click.prevent="flag=false">注册</a>
    		    <login v-if="flag"></login>
    		    <register v-else="flag"></register>
    		</div>
    		<script src="lib/vue-2.4.0.js"></script>
    		<script>
    		    Vue.component("login",{
    		        template:"<h1>登录组件</h1>"
    		    })
    		    Vue.component("register",{
    		        template:"<h1>注册组件</h1>"
    		    })
    		    let vm = new Vue({
    		        el:"#app",
    		        data:{
    		            flag: false
    		        },
    		        methods:{
    		        },
    		    })
    		</script>
    		</body>
    		组件切换:法二
    		
    		 <style>
    		        .red{
    		            color:red;
    		        }
    		        .v-enter{
    		            opacity:0;
    		            transform: translateX(150px);
    		        }
    		        .v-leave-to{
    		            opacity:0;
    		            transform: translateX(-150px);
    		        }
    		        .v-enter-active,
    		        .v-leave-active{
    		            transition: all 0.5s;
    		            position: absolute;
    		        }
    		    </style>
    		</head>
    		<body>
    	
    
    			    <div id="app">
    			    		    <a href="" :class="{red: flag=='login'}" @click.prevent="flag='login'">登录</a>
    			    		    <a href="" :class="{red: flag=='register'}" @click.prevent="flag='register'">注册</a>
    	    <!--  vue提供了一个标签  component标签(理解为一个占位符), 用来展示对应名称的组件  :is属性设置指定的组件名  -->
    	    <transition>
    	        <component :is="flag"></component>
    	    </transition>
    	</div>
    	<script src="lib/vue-2.4.0.js"></script>
    	<script>
    	    Vue.component("login",{
    	        template:"<h1>登录组件</h1>"
    	    })
    	    Vue.component("register",{
    	        template:"<h1>注册组件</h1>"
    	    })
    	    let vm = new Vue({
    	        el:"#app",
    	        data:{
    	            flag: "login"
    	        },
    	        methods:{
    	
    	        },
    	    })
    	</script>
    	</body>
    	父组件向子组件传值
    	
    	<body>
    	<div id="app">
    	    <my-component :fromfather="father"></my-component>
    	</div>
    	<template id="box1">
    	    <h1 @click="change">
    	        {{ fromfather }}
    	        子组件的数据
    	    </h1>
    	</template>
    	<template id="grandSon">
    	    <h1>孙子组件的数据</h1>
    	</template>
    	<!--1.子组件不能访问父组件的数据
    	2. 解决办法: ①在引用子组件时, 通过属性绑定 v-bind方法, 把需要传递给子组件的数据以绑定的形式传过来
    	              ② 在子组件配置项里添加 props: ['传递过来的数据']-->
    	<script src="lib/vue-2.4.0.js"></script>
    	<script>
    	    let vm = new Vue({
    	        el:"#app",
    	        data:{
    	            father:'啊~~这是父组件的数据'
    	        },
    	        methods:{
    	        },
    	        //局部子组件
    	        components:{
    	            // 组件名: {配置项}
    	            "myComponent":{
    	                template:'#box1',
    	                data(){
    	                    return {
    	                        msg:"哈哈"
    	                    }
    	                },
    	                //在子组件配置项里添加 props: ['传递过来的数据']
    	                //注意: 组件中所有的props中的数据, 都是通过父组件传递给子组件的, props中的数据是只读, 无法修改
    	                props:['fromfather'],
    	                methods:{
    	                    change(){
    	                       // this.fromfather = "被修改了"
    	                    }
    	                },
    	                //局部子子组件
    	                components:{
    	                    'grandSon':{
    	                        template:'#grandSon'
    	                    }
    	                }
    	            }
    	        }
    	    })
    	</script>
    	</body>
    

    展开全文
  • 基于vue-cli模式下 使用局部注册组件方式写的简单购物车
  • 1、vue.component和vue.use的用法 vue.component和vue.use的用法 Vue.use()怎么用 vue封装一个可以通过api调用的组件 注册全局组件 main文件 import VueQuillEditor from 'vue-quill-editor' // 将富文本编辑器注册...
  • vue鼠标悬停图片放大特效是一款基于vue.js跟css3制作的相册图片悬停弹出3d放大展示代码。
  • vue2和vue3的区别

    千次阅读 2022-02-21 15:09:16
    文章目录前言一、vue2和vue3双向数据绑定原理的区别?二、生命周期的变化三、diff不同 前言 一、vue2和vue3双向数据绑定原理的区别vue2 的双向数据绑定是利用ES5 的一个 API Object.definePropert()对数据进行...
  • 今天将介绍一下组件的全局注册和局部注册。 全局注册 全局注册的组件,每一个HTML区域都可以引用。我们使用Vue.extend()来定义组件,使用Vue.component()来注册组件。 <!DOCTYPE html> <html lang="en">...
  • 分类:全局组件(构造函数上)+局部组件(vue实例上) 全局组件: 1:组件内data为函数形式,修改时只修改当前组件内的值 2:组件可重复使用 示例: data使用示例: 局部组件: 注意:实例上组件与全局组件相同...
  • 局部自定义指令:只能在本身的vue实例中应用。 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>全局自定义指令与局部自定义指令的区别</title> &...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 44,414
精华内容 17,765
关键字:

vue 全局下载和局部下载区别