我正在写我的Vue组件的方式是否正确？

这是我目前正在编写我的Vue组件的方式。例如。我正在写我的Vue组件的方式是否正确？

<template> 
    <NavBar></NavBar> 
    <div class="Footer"> 
     <div class="left"> 
     <p>I'm a cool footer on the Left!</p> 
     </div> 
     <div class="middle"> 
     </div> 
     <div class="right"> 
     <p>I'm a cool footer on the Right!</p> 
     </div> 
    </div> 
    </template> 

    <script> 
    import NavBar from './NavBar.vue'; 
    export default { 
    name: 'Footer', 
    components: { 
     NavBar 
    } 
    data() { 
     return { 
     } 
    }, 
    methods: { 
    } 
    }

我的问题是我应该写这样的组件吗？如果是这样，有什么区别？

Vue.component('my-component', { 
    template: '<div>A custom component!</div>' 
    }) 

    new Vue({ 
    el: '#example' 
    })

来源

2017-08-22 kcuhcx2

的官方指南这里解释的区别：https://vuejs.org/v2/guide/single-file-components.html

短的解释是，<template>...语法用于单文件的部件（例如my-component.vue），而vue.component...语法用于沿着new Vue({...声明。从导向

全报价：

在许多Vue的项目，全球组件将使用Vue.component，其次是new Vue({ el: '#container' })目标在每一个页面的主体的容器元素来定义。这对于中小型项目非常适用，JavaScript只用于增强某些视图。然而，在更复杂的项目，或者当你的前端完全是由JavaScript驱动的，这些缺点显而易见：

全局定义强制唯一的名称为每个组件
字符串模板缺少语法高亮并且需要难看的斜杠用于多行HTML
没有CSS支持意味着在同时HTML和JavaScript是模块化成组件，CSS显眼地离开了
没有构建步骤限制我们HTML和ES5的JavaScript，像哈巴狗（原玉）和巴贝尔而非预处理器

所有这些都通过扩展.vue扩展的单文件组件解决，使用Webpack或Browserify等构建工具成为可能。

来源

2017-08-22 21:22:39 mrogers

我会尽可能让你的开发变得容易，并且可以很容易地理解应用程序结构。 – mrogers

我正在写我的Vue组件的方式是否正确？

回答

相关问题