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

最新推荐文章于 2025-10-23 10:13:38 发布

原创

最新推荐文章于 2025-10-23 10:13:38 发布 · 1.8k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#linq #p2p #wpf

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

使用全局定义

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"
                }
            }
        })

        const app = new Vue({
            el: "#app",
            data: {