局部注册和全局注册都怎么实现

2021-04-02 10:02发布

24条回答
一个Ai
2楼 · 2021-04-02 10:45

全局注册,注册的组件需要在初始化根实例之前注册了组件;

局部注册,通过使用组件实例选项注册,可以使组件仅在另一个组件或者实例的作用域中可用:

全局组件

js

Vue.component('tab-title',{   props:['title'],   template:'
  • {{title}}
  • '  }) Vue.component('tab-content',{   props:['content'],   template:'
    {{content}}
    '  })

    局部组件demo:

    html

         
       
      
      

    js

    var app=new Vue({
          el: '#app',
         components: {       'tab-title': {
            props:['info'],//接受父元素传递的参数
            template:'
  • {{info}}
  • '//点击时传递通过$emit子元素传递给父元素调用 addactive方法(不能使用驼峰写法)         },       'tab-content':{          props:["content"],         template:'
    {{content}}
    '        }      },      methods:{        switchActive:function(index){        for(var i=0;i

    组件实例的作用域是孤立的。这意味着不能再子组件的模板内直接引用父组件的数据。要让子组件可以使用父组件的数据,我们需要通过子组件的props选项。

    子组件要显式地用 props 选项声明它期待获得的数据

    在模板中,要动态地绑定父组件的数据到字模板的props,与绑定到任何普通的HTMO特性相类似。就是使用 v-bind。每当父组件的数据变化时,该变化也会传递给子组件:

    所有的vuejs组件都是被扩展的vue实例

    每一个Vue实例都会代理这个实例的data属性对象里的所有的属性

    所有的Vue实例本身保罗的属性和方法,都以$开头来区别,对应Vue.set

    例如:

    vm.$data

    vm.$methods

    vm.$watch

    这个有利于和data属性对象的数据来区分

    多有的指令都以v-xxx形式存在:

    是开心果呀 - 热爱生活
    3楼 · 2021-04-02 12:41

    组件是 vue最强大的功能之一,在项目中我们经常会用到很多可复用的代码块,通过封装可重用的代码不仅提高了组件的可重用性,而且每个 Vue 组件都是Vue的实例,可接受相同的选项对象并提供相同的生命周期钩子。这就让项目调试起来更加简单方便,整个开发效果也更高,可维护性也更强,也能适合多人协同开发来构建大型应用。同时组件也是资源独立的,组件在系统内部可复用,组件和组件之间也可以嵌套。





    灰机带翅膀
    4楼 · 2021-04-02 13:32

    全局组件:  如果想组件在任何地方都能应用,我们就需要注册全局组件
    局部组件:  局部组件要挂载到实例元素(在实例中定义组件)上,否则没有效果

    全局注册:

    全局注册的组件,Vue 根实例 (new Vue) 的中使用。缺点:注册了的全局组件,就算不需要用到,仍会占用内存在注册之后可以用可以在任何新创建的

    局部注册:

    两种方式:

    1.单独声明组件。用js  对象注册组件

    2.直接在实例中components注册


    是你的小甜心呀
    5楼 · 2021-04-02 13:40

    组件是 vue最强大的功能之一,在项目中我们经常会用到很多可复用的代码块,通过封装可重用的代码不仅提高了组件的可重用性,而且每个 Vue 组件都是Vue的实例,可接受相同的选项对象并提供相同的生命周期钩子。这就让项目调试起来更加简单方便,整个开发效果也更高,可维护性也更强,也能适合多人协同开发来构建大型应用。同时组件也是资源独立的,组件在系统内部可复用,组件和组件之间也可以嵌套。



    哈哈哈哈哈哈嗝
    6楼 · 2021-04-02 14:09

    全局组件:  如果想组件在任何地方都能应用,我们就需要注册全局组件
    局部组件:  局部组件要挂载到实例元素(在实例中定义组件)上,否则没有效果


    yuixan
    7楼 · 2021-04-02 14:10

    全局注册与局部注册

    全局注册是vue。

    局部注册时this。

    为什么要分这两种注册方式呢,有什么意义?


    张皓铭
    8楼 · 2021-04-02 15:08

    组件是 vue最强大的功能之一,在项目中我们经常会用到很多可复用的代码块,通过封装可重用的代码不仅提高了组件的可重用性,而且每个 Vue 组件都是Vue的实例,可接受相同的选项对象并提供相同的生命周期钩子。这就让项目调试起来更加简单方便,整个开发效果也更高,可维护性也更强,也能适合多人协同开发来构建大型应用。同时组件也是资源独立的,组件在系统内部可复用,组件和组件之间也可以嵌套。



    用户555666
    9楼 · 2021-04-02 15:09

    全局注册

    用 Vue.component 来创建组件:


    Vue.component(‘my-component-name’, {

    // … 选项 …

    })

    这些组件是全局注册的。也就是说它们在注册之后可以用在任何新创建的 Vue 根实例 (new Vue) 的模板中。比如:


    Vue.component(‘component-a’, { /* … / })

    Vue.component(‘component-b’, { / … / })

    Vue.component(‘component-c’, { / … */ })


    new Vue({ el: ‘#app’ })


    记住全局注册的行为必须在根 Vue 实例 (通过 new Vue) 创建之前发生。

    局部注册

    全局注册往往是不够理想的。比如,如果你使用一个像 webpack 这样的构建系统,全局注册所有的组件意味着即便你已经不再使用一个组件了,它仍然会被包含在你最终的构建结果中。这造成了用户下载的 JavaScript 的无谓的增加。


    在这些情况下,你可以通过一个普通的 JavaScript 对象来定义组件:


    var ComponentA = { /* … / }

    var ComponentB = { / … / }

    var ComponentC = { / … */ }

    然后在 components 选项中定义你想要使用的组件:


    new Vue({

    el: ‘#app’,

    components: {

    ‘component-a’: ComponentA,

    ‘component-b’: ComponentB

    }

    })

    对于 components 对象中的每个属性来说,其属性名就是自定义元素的名字,其属性值就是这个组件的选项对象。


    注意局部注册的组件在其子组件中不可用。例如,如果你希望 ComponentA 在 ComponentB 中可用,则你需要这样写:


    var ComponentA = { /* … */ }


    var ComponentB = {

    components: {

    ‘component-a’: ComponentA

    },

    // …

    }

    或者如果你通过 Babel 和 webpack 使用 ES2015 模块,那么代码看起来更像:


    import ComponentA from ‘./ComponentA.vue’


    export default {

    components: {

    ComponentA

    },

    // …

    }

    注意在 ES2015+ 中,在对象中放一个类似 ComponentA 的变量名其实是 ComponentA: ComponentA 的缩写,即这个变量名同时是:


    用在模板中的自定义元素的名称

    包含了这个组件选项的变量名