问

javascript - 关于vue框架的局部组件注册问题？求解。。。

mobiledu2502856653 发布于 2022-11-08 13:57

vue框架有Vue.extend()方法，用来创建一个组件构造器，组件构造器创建之后需要注册(全局注册/局部注册)后才可以使用
例如：

    //我要局部注册组件，在官网上找到如下的例子
    var Child = Vue.extend({ /* ... */ })

    var Parent = Vue.extend({
      template: '...',
      components: {
        //  只能用在父组件模板内
        'my-component': Child
      }
    })
    //但是我加上自己的理解写出来就是出问题了。

按照我的理解，组件使用extend创建之后，都是需要注册的，那么我将一个子组件注册到父组件，那么子组件无法在外部调用，只有通过调用父组件才能使用子组件。那么是不是父组件也是需要在全局注册之后才能使用？望解答，顺便说下 上面的那段代码怎么写才是正确的？

3 个回答

1. 你的<my-component></my-component>注册在parent中
2. parent未关联example
2022-11-12 01:41 回答

mobiledu2502880747
我也遇到这个报错，注意html里new Vue创建的实例不能包含在其他实例中，这样就好了

2022-11-12 01:41 回答

Alistar1991_281

首先，上面的代码可以这样子跑起来。代码如下。或者去https://jsfiddle.net/qton08sd/ 看效果

    <p id="example">
        <parent> </parent>
    </p>
    <script>
        var Child = Vue.extend({
            template:"<p>子集的模版</p>"
        });
        var Parent = Vue.extend({
            template:"<p>父集的模版</p><my-component></my-component>",
            components:{   //将子集的组件注册到父集
                'my-component': Child  //注册到父集之后就直接使用my-component这个模版吗？
            }
        });
        new Vue({
            el: '#example',
          components: {
              'parent': Parent
          }
        });
    </script>

组件注册后，是需要使用的，Vue.js通过new Vue来创建实例。所以父组件的使用需要在new Vue中进行注册，然后在HTML中进行使用。

2022-11-12 01:41 回答

Dearlily2046_394

撰写答案

今天，你开发时遇到什么问题呢？

立即提问

热门标签