zoukankan      html  css  js  c++  java
  • Vue-cli中的组件

      组件文件位置  

        Vue-cli的组件都写在项目文件夹下的`src`文件夹下的`components`下,每个组件单独一个`.vue`文件。

      基本组件文件结构

       每个组件文件都包含:模版(template)、组件参数、组件样式(style)

    // 模版
    <template>
    
    </template>
    // 组件参数
    <script>
    export default {
      
    };
    </script>
    // 组件样式
    // 在style标签中添加`scoped`,表示该样式只适用于当前组件,如果需要全局适用,则去掉`scoped`即可
    <style scoped>
    
    </style>

      在写组件参数时,和在Vue中的写法一样。

      组件文件引用

      1、导入组件文件

      在app.vuescript中使用import语法导入

    import 自定义组件名(不一定必须使用vue文件名) from "文件路径";

      2、注册组件

      在app.vue中的`components`中添加刚才自定义的组件名

      1、2两步合起来的示例代码:

    <script>
    import HeaderVue from "./components/header";
    export default {
      name: "App",
      components: {
        HeaderVue
      },
    };
    </script>

      3、引用组件

      在app.vue的template中引用组件

    <template>
      <div id="app">
        <HeaderVue></HeaderVue>
      </div>
    </template>
  • 相关阅读:
    教你当主管:如何降低你的员工流失率?
    你问我这算什么
    推荐:职场提升的10条捷径
    压力从何而来呢?千万不要2008年结婚
    怎样“管理”你的上司?
    HTTP.sys
    IIS书籍
    IIS目录
    HTTP服务
    在 IIS 7 中使用配置文件
  • 原文地址:https://www.cnblogs.com/xshan/p/12368639.html
Copyright © 2011-2022 走看看