为什么必须先写自定义组件，然后再写vue实例呢？

最新推荐文章于 2024-04-11 18:04:43 发布

西瓜味的俏阿狸

最新推荐文章于 2024-04-11 18:04:43 发布

阅读量427

点赞数 2

分类专栏： # 组件注册文章标签： vue.js html5 javascript chrome es6

本文链接：https://blog.csdn.net/weixin_44164405/article/details/106421148

版权

组件注册专栏收录该内容

2 篇文章 0 订阅

订阅专栏

为什么必须先写自定义组件，然后再写vue实例呢？

今天在学vue自定义组件这个板块时遇到了一个问题，搞了好久都没有解决出来，看一下我的代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <button-counter></button-counter>
  </div>
  <script type="text/javascript" src="js/vue.min.js"></script>
  <script type="text/javascript">
    var vm = new Vue({
      el: '#app',
      data: {

      }
    });

    Vue.component('button-counter', {
      data: function(){
        return {
          count: 0
        }
      },
      template: '<button @click="handle">点击了{{count}}次</button>',
      methods: {
        handle: function(){
          this.count += 2;
        }
      }
    })

  </script>
</body>
</html>

代码在webStorm编译没有报错并且在浏览器f12也没有任何提示错误，但是就是没有运行结果，后来在发现是全局注册组件与vue的实例的位置写反了，正确是这样：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <button-counter></button-counter>
  </div>
  <script type="text/javascript" src="js/vue.min.js"></script>
  <script type="text/javascript">
   

    Vue.component('button-counter', {
      data: function(){
        return {
          count: 0
        }
      },
      template: '<button @click="handle">点击了{{count}}次</button>',
      methods: {
        handle: function(){
          this.count += 2;
        }
      }
    })
    var vm = new Vue({
      el: '#app',
      data: {

      }
    });

  </script>
</body>
</html>

总结：vue的实例化会把全局注册的组件注册到当前实例中，实例化完成你再全局注册组件是对这个实例不起作用的，所以第一段代码是已经实例化完毕vue了又去注册了组件，这样即使在调用组件也不会起作用了

个人微信公众号，欢迎关注
个人微信公众号欢迎关注

西瓜味的俏阿狸

关注

2
点赞
踩
2

收藏

觉得还不错? 一键收藏
1
评论
为什么必须先写自定义组件，然后再写vue实例呢？

为什么必须先写自定义组件，然后再写vue实例呢？今天在学vue自定义组件这个板块时遇到了一个问题，搞了好久都没有解决出来，话不多少，看一下我的代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title></head><body> <div id="app">
复制链接

扫一扫

专栏目录