首页 > 其他分享 >vue引入组件注释

vue引入组件注释

时间:2022-10-06 14:25:05浏览次数:63  
标签:vue 这步 js 注释 引入 组件 import

组件引入进来分为三步走:①引入组件,②注册组件,③使用组件

<template>
    <view>
        <uni-badge text="abc" :inverted="true"></uni-badge><!--3.使用组件-->
    </view>
</template>
<script>
    import uniBadge from "../../../components/uni-badge.vue";//1.导入组件(这步属于传统vue规范,但在uni-app的easycom下可以省略这步)
    export default {
        data() {
            return {
                
            }
        },
        components: {
            uniBadge //2.注册组件(这步属于传统vue规范,但在uni-app的easycom下可以省略这步)
        }
    }
</script>

如需要全局导入vue组件,即每个页面都可以直接使用而不用引用和注册的话,在项目根目录下的main.js里处理。如下面所示

//main.js
import pageHead from './components/page-head.vue' //导入
Vue.component('page-head', pageHead) //注册。注册后在每个vue的page页面里可以直接使用<page-head></page-head>组件。

 

 

 

另外标注: 以前引入用通过script src、link href引入外部的js和css;

现在是es6的写法,import引入外部的js模块(注意不是文件)或css

以前

<script src="js/jquery.js" type="text/javascript"></script>
<link href="css/jquery.css" rel="stylesheet" type="text/css"/>

 

现在

<script>
var util = require('/static/common/util.js');  //require这个js模块
var formatedPlayTime = util.formatTime(playTime); //调用js模块的方法
</script>

css引入模块

<style>
    @import "./common/uni.css";
    
    .hello-text{
        color:#7A7E83;
    }
</style>

 

标签:vue,这步,js,注释,引入,组件,import
From: https://www.cnblogs.com/murphyzhang/p/16757538.html

相关文章