VUE中组件的使用

关于vue组件引用

使用Nodejs的方法

被引用的组件要暴露 module.exports={};
引用时用 var abc= require("组件的路径")
然后就可以用abc点出来组件中的东西属性或者方法
代码

//cal.js的内容  一定要包裹在对象中  还要是顶级作用域  如不能再函数值暴露  没用
module.exports={
    sayHi:function(){
        console.log("你好啊")
    }
};


//main.js   引用后就可以使用了 也要是顶级作用域   注意 命名很重要 要一致   
var abc=require("./cal.js");
console.log(abc);
abc.sayHi();

ES6的方法(整体抛出)

被引用的组件要暴露 export default {}
引用时用 import Cal from "组件的路径";
然后就可以用 Cal点出来组件中的东西属性或者方法
代码

//cal.js的内容  一定要包裹在对象中  还要是顶级作用域  如不能再函数值暴露  没用
export default {
    add:function (n1,n2){
        return n1+n2;
    },
    num:34
};



//main.js   引用后就可以使用了 也要是顶级作用域   注意 命名很重要 要一致   
 import  Cal  from "./cal.js";
 console.log(Cal.add(4,5));
 console.log(Cal.num);

ES6的方法(单个抛出)

代码

//cal.js的内容 
//声明直接导出
 export  const num =123;

 //先声明后导出
 const Cal ={
     sub:function(n1,n2){
         console.log(n1-n2);
     }
 };
export { Cal };



//main.js   引用后就可以使用了 也要是顶级作用域   注意 命名很重要 要一致   
 import { Cal,num} from "./cal.js";
Cal.sub(12,1);
console.log(num);

使用 node工具合成浏览器可以使用的 js文件
1. 在项目目录 npm init -y 初始化设置 package.json 文件 script项 "test": "webpack ./main.js ./build.js"; //使用 webpack工具把当前文件夹的main.js 转换为 build.js文件
2. npm install webpack@2.2.1 --save-dev --registry https://registry.npm.taobao.org //使用淘宝镜像下载 webpack的包
3. 写好js后使用 npm run test 跑下生成 build.js 每次修改都要跑一下

VUE中组件的使用

推荐阅读