Vue创建组件的方式

最新推荐文章于 2024-10-03 11:49:22 发布

weixin_436278061

最新推荐文章于 2024-10-03 11:49:22 发布

阅读量487

点赞数

CC 4.0 BY-SA版权

分类专栏： Vue

本文链接：https://blog.csdn.net/weixin_43627806/article/details/89883523

Vue 专栏收录该内容

13 篇文章

订阅专栏

博客介绍了三种组件创建方式。方式一是创建私有组件；方式二创建的是全局组件；方式三代码可高亮显示且有提示，编写较为方便。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

方式一

创建一个私有组件

  new Vue({
    el:"#app",
    components: {
       App:{
         template:"<div><h1>标题</h1><span>内容</span></div>"
       }
    },
    template:'<App></App>'
  })

方式二

这里创建的是一个全局组件

 <!-- <script>
  Vue.component("MySon",{
    template:"<div> 这是全局组件 </div>"
  })
  var vm = new Vue({
  el:'#app',
  data: {
  }
  })
  </script> -->

方式三

此方代码可以高亮的显示，并且有代码的提示，写起来比较方便

   <template id="login">
     <div @click = "handleClick" >
       <h1>标题</h1>
       <span>内容</span>
     </div>
   </template>
  <script>
 Vue.component("MyLogin",{
   template:"#login",
   methods:{
    handleClick() {
     alert("a")
    }
   }
 })