注册组件的语法糖

最新推荐文章于 2024-09-05 16:55:11 发布

usrname为username

最新推荐文章于 2024-09-05 16:55:11 发布

阅读量175

点赞数

分类专栏： vue学习文章标签： vue.js javascript 前端 html

本文链接：https://blog.csdn.net/weixin_54327001/article/details/128070008

版权

vue学习专栏收录该内容

41 篇文章 0 订阅

订阅专栏

这篇博客介绍了Vue.js中组件的两种注册方式：全局组件和局部组件，并提供了使用语法糖写法的示例。全局组件`cpn1`包含一个标题和段落内容，而局部组件`cpn2`同样展示了一个标题和内容。通过这种方式，开发者可以更加便捷地在Vue应用中组织和复用UI部件。

摘要由CSDN通过智能技术生成

const cpnC2=Vue.extend({这个写法目前非常少见，普遍是语法糖写法

<script>
 // 1.注册全局组件语法糖写法,无需组件构造器
  Vue.component("cpn1",{
    template:  `
        <div>
        <h2>我是标题1</h2>
        <p>内容1</p>
        </div>`
  })

  const app=new Vue({
    el:"#app",
    data://注意此处的花括号
        {
          message:"这是一个vue模板"
        },
    // 2.注册局部组件语法糖写法,无需组件构造器
    components:{
      //此处cpn2或者“cpn2”都可
      cpn2:{
        template:  `
          <div>
          <h2>我是标题2</h2>
          <p>内容2</p>
          </div>`
      }
    }
  })
</script>