VUE中组件的使用

Posted var-chu

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了VUE中组件的使用相关的知识,希望对你有一定的参考价值。

  1. 关于vue组件引用

  2. 使用Nodejs的方法

    1. 被引用的组件要暴露 module.exports={};

    2. 引用时 用 var abc= require("组件的路径")

    3. 然后 就可以用abc点出来组件中的东西 属性或者方法

    4. 代码

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

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

      ?

  3. ES6的方法(整体抛出)

    1. 被引用的组件要暴露 export default {}

    2. 引用时 用 import Cal from "组件的路径";

    3. 然后 就可以用 Cal点出来组件中的东西 属性或者方法

    4. 代码

    5. ```
      //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);
      ```

  4. ES6的方法(单个抛出)

    1. 代码

    2. ```
      //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);
      ```

  5. 使用 node工具 合成浏览器可以使用的 js文件

  6. 在项目目录 npm init -y 初始化 设置 package.json 文件 script项 "test": "webpack ./main.js ./build.js"; //使用 webpack工具 把 当前文件夹的main.js 转换为 build.js文件
  7. npm install [email protected] --save-dev --registry https://registry.npm.taobao.org //使用淘宝镜像 下载 webpack的包
  8. 写好js后 使用 npm run test 跑下 生成 build.js 每次修改都要跑一下

以上是关于VUE中组件的使用的主要内容,如果未能解决你的问题,请参考以下文章

Vue3中使用图片查看组件 支持vue3的图片组件

Vue2组件可以在Vue3中使用吗

vue全局组件局部组件的使用

3Vue 笔记(axiosVue 动画Vue 组件使用 this.$refs 来获取元素和组件Vue 组件中 data 和 props 的区别)

灵活使用vue单文件组件之--最少配置打包.vue组件

vue组件调用另外一个组件中的方法