Vue2.0全局组件的最详细基本使用方法

最新推荐文章于 2024-08-16 18:06:10 发布

代码搬运工的小马

最新推荐文章于 2024-08-16 18:06:10 发布

阅读量1.7k

点赞数 2

分类专栏： vue 文章标签： linq p2p wpf

本文链接：https://blog.csdn.net/cider_m/article/details/122939766

版权

本文介绍了Vue2.0全局组件的定义方法，对比了全局组件与局部组件的适用场景。同时深入探讨了为什么data属性必须是一个函数，强调了这在确保组件独立性和可复用性方面的重要性，避免了不同组件间数据的互相影响。

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

使用全局定义

vue组件有两种，一种是全局组件，一种是局部组件。整个项目经常用到的用全局写法，用到比较少的专供特定页面用的使用局部组件。

component---组件（就是对象）

代码详情

<body>
    <div id="app">
        <!-- 相当于标签 -->
        <mnav></mnav>
    </div>
    <script src="./node_modules/vue/dist/vue.js"></script>
    <script>
        //1.使用全局定义 component---组件（就是对象）
        Vue.component("mnav", {
            //template 配置？
            template: "<ul><li>首页</li><li>{
  {msg}}</li></ul>",
            // 在组件中data必须是一个函数？
           
            data() {
                return {
                    msg: "helloworld"
                }