精华内容
下载资源
问答
  • Vue中引入组件步骤?

    千次阅读 2020-05-07 16:35:37
    CommonJS的require()方法引入组件 2.对组件进行注册,代码如下 注册 Vue.component('my-component', { template: '<div>A custom component!</div>'}) 3.使用组件 <my-component></my-com...

    1.采用ES6的import … from …语法

    CommonJS的require()方法引入组件

    2.对组件进行注册,代码如下
    注册

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

    3.使用组件

    <my-component></my-component>
    
    展开全文
  • 前端框架vue,在利用脚手架工具vue-cli创建前端项目时候,怎么引入组件呢?下面是详细的写法。 1、第一步,利用vue-cli创建一个vue前端项目,文件夹如下图 2、第二步,例子是在hom.vue界面引入子组件header.vue,...
  • 项目如果多个页面都显示有相同的区域内容,则该公共区域内容可以封装成公共组件进行使用。 步骤: 1、创建自定义公共组件,在src下的components目录自定义创建需要的公共组件 2、在main.js文件中将组件挂载到...

    什么是公共组件,公共组件的使用场景

    项目中如果多个页面都显示有相同的区域内容,则该公共区域内容可以封装成公共组件进行使用。

    步骤:

    1、创建自定义公共组件,在src下的components目录中自定义创建需要的公共组件

    在这里插入图片描述

    2、在main.js文件中将组件挂载到全局范围内。

    至于如何挂载…en。。。。。

    // 注册全局组件
    import mylist from './components/Home/MyList.vue'
    Vue.component('my-list', mylist)
    

    就这样,就可以了…

    3、在定义的组件内写入代码,有重点…

    e,其实也没什么,就是在script中的name中声明组件名称比较规范一些。

    <template>
      <div id="mobile">
        <ul>
          <li v-for="item in phone" :key="item.product_id">
            <router-link
              :to="{ path: 'details', query: { id: item.category_id } }"
              class="route"
            >
              <img :src="$target + item.product_picture" alt="" />
              <p>{{ item.product_name }}</p>
              <p>{{ item.product_title }}</p>
              <p class="price">
                <b>{{ item.product_selling_price }}</b
                ><span v-if="item.product_selling_price !== item.product_price"
                  >{{ item.product_price }}</span
                >
              </p>
            </router-link>
          </li>
          <li class="last" v-if="!flag">
            <div @click="more">浏览更多<i class="el-icon-d-arrow-right"></i></div>
          </li>
        </ul>
      </div>
    </template>
    <script>
    export default {
      name: "mylist",
      props: ["phone", "flag"],
      data() {
        return {};
      },
    
      methods: {
        more() {
          let arr = [];
          this.phone.forEach((item) => {
            if (arr.indexOf(item.product_id) == -1) {
              arr.push(item.category_id);
            }
          });
          var newArr = Array.from(new Set(arr));
          this.$arr.setMsg(newArr);
          this.$router.push({ path: "/goods", query: { categoryID: newArr } });
        },
      },
    };
    </script>
    

    4、最后在页面中

    <template>
      <div id="goods">
            <!-- 引入全局组件 -->
            <my-list :phone="listData" :flag="sum"></my-list>
      </div>
    </template>
    <script>
    import CateApi from "../api/cate";
    export default {
      name: "mylist",
      data() {
        return {
          sum: 1,
          activeIndex: "0",
          categoryID: [],
          currentPage: 1,
          pageSize: 15,
    
          listData: [], //商品数据
          nameData: [], //分类数据
          search: "", //搜索
          total: 0,
        };
      },
      created() {
        /*
          浏览更多
        */
        this.getMore();
    
        this.getlist("list");
        this.getlistName();
        let query = this.$route.query;
        // Object.keys()返回一个多有元素为字符穿的数组
        if (query.search) {
          this.search = query.search;
          this.searchList();
        }
        this.activeIndex = "-1";
      },
      watch: {
        // 监听分类切换时的状态
        activeIndex(val) {
          //组件切换是传递的是字符串类型,
          let index = Number(val);
          this.categoryID = [index]; //成员访问
          this.currentPage = 1;
          this.total = 0;
          this.search = "";
          if (index === 0) {
            this.categoryID = [];
            this.getlist("list");
          } else {
            this.getlist();
          }
        },
        $route(val) {
          if (val.query.search) {
            this.search = val.query.search;
            this.currentPage = 1;
            this.total = 0;
            this.activeIndex = "-1";
            this.searchList();
          }
        },
        // 分页数  据改变时
        currentPage() {
          this.getlist("list");
          if (this.search) {
            this.searchList();
          } else {
            this.getlist();
          }
        },
      },
      methods: {
        // 点击浏览更多
        async getMore() {
          this.categoryID = this.$arr.msg;
          console.log(this.categoryID);
          let type = {
            categoryID: this.categoryID,
            currentPage: this.currentPage,
            pageSize: this.pageSize,
          };
          const { data: res } = await CateApi.listClassify(type);
          this.listData = res.Product;
          this.total = res.total;
          console.log(res);
        },
        // 所有商品数据
        async getlist(apiName = "listClassify") {
          let type = {
            categoryID: this.categoryID,
            currentPage: this.currentPage,
            pageSize: this.pageSize,
          };
          const { data: res } = await CateApi[apiName](type);
          this.listData = res.Product;
          this.total = res.total;
        },
        // 获取分类名称
        async getlistName() {
          const { data: res } = await CateApi.nameList({});
          this.nameData = res.category;
          this.nameData.unshift({
            category_id: 0,
            category_name: "全部",
          });
        },
        // 搜索商品
        async searchList() {
          let type = {
            search: this.search,
            currentPage: this.currentPage,
            pageSize: this.pageSize,
          };
          const { data: res } = await CateApi.searchApi(type);
          this.listData = res.Product;
          this.total = res.total;
        },
        // 切换分页数据
        handleCurrentChange(val) {
          this.currentPage = val;
        },
      },
    };
    </script>
    

    重点来了

    • name写入组件名称
    • 在模板中直接引入即可

    最后的最后

    ​ 各位同学一定要保护好头发呀!

    展开全文
  • 主要介绍了vue项目创建并引入饿了么elementUI组件步骤,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • 公共组件使用场景:项目若多个页面都显示有相同的区域内容,则该公共区域内容可以封装成公共组件进行使用

    Vue中引入自定义公共组件方法

    说明:
    公共组件使用场景:项目中若多个页面都显示有相同的区域内容,则该公共区域内容可以封装成公共组件进行使用。

    步骤如下

    1、创建自定义公共组件,在src/components目录下自定义所需的公共组件:

    在这里插入图片描述

    2、封装公共组件、写组件实现的功能:

    完整代码如下:
    headTop/index.vue组件:

    <template>
      <div id="home-container" class="main">
        <!--页面上方面板-->
        <el-row>
          <el-col :span="24"><div class="grid-content bg-purple-dark" style="background-color: #2c3e50">
            <div>
              <!--跳转home主页-->
              <span class="title" style="color: white"><a href="../../views/home/index.vue" style="color: white;text-decoration: none">浦东新区公交站点管理系统</a></span>
            </div>
          </div></el-col>
        </el-row>
      </div>
    </template>
    
    <script>
      export default {
        /*实现三个页面的点击跳转*/
        methods:{
          /*页面跳转*/
          allStation(){
            this.$router.push({path:'xxx'})/*写入跳转路径*/
          },
          transform(){
            this.$router.push({path:'xxx'})/*写入跳转路径*/
          },
          noTransform(){
            this.$router.push({path:'xxx'})/*写入跳转路径*/
          }
        }
      }
    </script>
    
    <style>
      /*上侧 公交站点管理系统 标题样式*/
      .title{
        position: absolute;
        left: 40px;
        top: 10px;
        display: flex;
        align-items: center;
      }
    
      /*左侧菜单导航栏菜单样式:公交站点管理、已改造站点管理。未改造站点管理*/
      #li-allStation{
        color: white;
        list-style-type: none
      }
      #li-transform{
        color: white;
        list-style-type: none;
        margin-top: 30px
      }
      #li-noTransform{
        color: white;
        list-style-type: none;
        margin-top: 30px
      }
    
      /*输入站点编码点击按钮样式*/
      #search-button{
        background-color:rgb(0,153,204);
        color: white;
        width: 100px
      }
    
      /*使用hover选择器给所有li标签添加上鼠标移入时的样式*/
      li:hover{
        cursor: pointer;/*鼠标移入,显示手掌*/
        background: skyblue;/*鼠标移入,显示背景颜色*/
      }
      ul{
        width: 144px;/*给菜单栏li标签添加宽度*/
      }
    </style>
    

    navigationPanel/index.vue组件:

    <template>
      <div id="home-container" class="main">
        <el-row>
          <!--1、左侧面板菜单导航栏公共组件-->
          <el-col :span="4"><div class="grid-content bg-purple">
            <div style="height: 1000px;background-color: #2c3e50">
              <!--<span>公交站点管理</span><br>
              <span>已改造公交站点</span><br>
              <span>未改造公交站点管理</span><br>-->
              <br>
              <ul>
                <li id="li-allStation" @click="allStation">公交站点管理</li>
              </ul>
              <ul>
                <li id="li-transform" @click="transform">已改造公交站点</li>
              </ul>
              <ul>
                <li id="li-noTransform" @click="noTransform">未改造公交站点管理</li>
              </ul>
    
            </div>
          </div></el-col>
        </el-row>
    
      </div>
    </template>
    
    <script>
      /**
       * 右侧面板表格展示js
       * */
      export default {
        /*实现三个页面的点击跳转*/
        methods:{
          /*页面跳转*/
          allStation(){
            this.$router.push({path:'xxx'})/*写入跳转路径*/
          },
          transform(){
            this.$router.push({path:'xxx'})/*写入跳转路径*/
          },
          noTransform(){
            this.$router.push({path:'xxx'})/*写入跳转路径*/
          }
        }
      }
    </script>
    
    <style>
      /*表单样式*/
      /*公共组件不需要此部分*/
      /*.el-row {
        margin-bottom: 20px;
      &:last-child {
         margin-bottom: 0;
       }
      }
      .el-col {
        border-radius: 4px;
      }
      .bg-purple-dark {
        background: #99a9bf;
      }
      .bg-purple {
        background: #d3dce6;
      }
      .bg-purple-light {
        background: #e5e9f2;
      }
      !*修改上侧栏的高度样式*!
      .grid-content {
        border-radius: 4px;
        min-height: 46px;
      }
      .row-bg {
        padding: 10px 0;
        background-color: #f9fafc;
      }
    
      #home-container{
        background-color: rgb(43,45,70);
        width: 100%;
        height: 100%;
      }*/
    
      /*上侧 公交站点管理系统 标题样式*/
      .title{
        position: absolute;
        left: 40px;
        top: 10px;
        display: flex;
        align-items: center;
      }
    
      /*左侧菜单导航栏菜单样式:公交站点管理、已改造站点管理。未改造站点管理*/
      #li-allStation{
        color: white;
        list-style-type: none
      }
      #li-transform{
        color: white;
        list-style-type: none;
        margin-top: 30px
      }
      #li-noTransform{
        color: white;
        list-style-type: none;
        margin-top: 30px
      }
    
      /*输入站点编码点击按钮样式*/
      #search-button{
        background-color:rgb(0,153,204);
        color: white;
        width: 100px
      }
    
      /*使用hover选择器给所有li标签添加上鼠标移入时的样式*/
      li:hover{
        cursor: pointer;/*鼠标移入,显示手掌*/
        background: skyblue;/*鼠标移入,显示背景颜色*/
      }
      ul{
        width: 144px;/*给菜单栏li标签添加宽度*/
      }
    </style>
    

    3、在main.js里进行公共组件初始化

    import Vue from 'vue'
    import App from './App'
    import router from './router'
    import ElementUI from 'element-ui';
    import 'element-ui/lib/theme-chalk/index.css';
    Vue.use(ElementUI);
    /*引入自定义公共组件*/
    /*左侧导航栏公共组件1*/
    import navigationPanel from './components/navigationPanel/index';
    Vue.use(navigationPanel);/*使用自定义的公共组件*/
    Vue.component('navigation_panel',navigationPanel);/*初始化公共组件*/
    /*上侧头部面板公共组件2*/
    import headTop from './components/headTop/index';
    Vue.use(navigationPanel);/*使用自定义的公共组件*/
    Vue.component('head_top',headTop);/*初始化公共组件*/
    /*引入自定义公共组件*/
    
    Vue.config.productionTip = false
    
    /* eslint-disable no-new */
    new Vue({
      el: '#app',
      router,
      components: { App,navigationPanel,headTop},/*添加自定义组件*/
      template: '<App/>'
    })
    

    4、在需要使用公共组件的页面进行公共组件调用

    例如在项目首页页面使用公共组件,首页页面在src/views/home/index.vue目录下
    按需在中写入公共组件标签,这里我需要引入的组件标签分别是:

    <head_top></head_top>
    
    <navigation_panel></navigation_panel>
    

    在中写入组件引入的js代码
    先进行公共组件引入:

    import headTop from '../../components/headTop'
    import navigationPanel from '../../components/navigationPanel'
    

    再在export default {}写入:

    comments: {
        headTop,
        navigationPanel,
      }
    

    完整代码如下:

    <template>
      <div id="home-container" class="main">
        <!--页面上方头部面板信息-->
        <!--该部分通过公共组件引入-->
        <!--<el-row>
          <el-col :span="24"><div class="grid-content bg-purple-dark" style="background-color: #2c3e50">
            <div>
              &lt;!&ndash;点选系统名称,跳转至home主页&ndash;&gt;
              <span class="title" style="color: white"><a href="index.vue" style="color: white;text-decoration: none">公交站点管理系统</a></span>
            </div>
          </div></el-col>
        </el-row>
        <el-row>-->
        <head_top></head_top>
          <!--1、左侧面板菜单导航栏-->
          <!--该部分通过公共组件引入-->
          <!--<el-col :span="4"><div class="grid-content bg-purple">
            <div style="height: 1000px;background-color: #2c3e50">
              &lt;!&ndash;<span>公交站点管理</span><br>
              <span>已改造公交站点</span><br>
              <span>未改造公交站点管理</span><br>&ndash;&gt;
              <br>
              <ul>
              <li id="li-allStation" @click="allStation">公交站点管理</li>
              </ul>
              <ul>
                <li id="li-transform" @click="transform">已改造公交站点</li>
              </ul>
              <ul>
                <li id="li-noTransform" @click="noTransform">未改造公交站点管理</li>
              </ul>
            </div>
          </div></el-col>-->
        <navigation_panel></navigation_panel>
          <!--2、右侧面板表格展示栏-->
          
          <!--此处代码省略-->
          
      </div>
    </template>
    
    <script>
      /**
       *引入自定义公共组件
       * */
      import headTop from '../../components/headTop'
      import navigationPanel from '../../components/navigationPanel'
    /**
     * 右侧面板表格展示js+引入自定义公共组件js
     * */
    export default {
      data() {
        return {
          /*引入自定义公共组件js*/
          /*无return数据*/
        }
      },
      /*实现三个页面的点击跳转*/
      methods:{
        /*页面跳转*/
        allStation(){
          this.$router.push({path:'xxx'})/*写入跳转路径*/
        },
        transform(){
          this.$router.push({path:'xxx'})/*写入跳转路径*/
        },
        noTransform(){
          this.$router.push({path:'xxx'})/*写入跳转路径*/
        }
      },
      comments: {
        headTop,
        navigationPanel,
      }
    }
    </script>
    
    <style>
      .el-row {
        margin-bottom: 20px;
        &:last-child {
         margin-bottom: 0;
       }
      }
      .el-col {
        border-radius: 4px;
      }
      .bg-purple-dark {
        background: #99a9bf;
      }
      .bg-purple {
        background: #d3dce6;
      }
      .bg-purple-light {
        background: #e5e9f2;
      }
      /*修改上侧栏的高度样式*/
      .grid-content {
        border-radius: 4px;
        min-height: 46px;
      }
      .row-bg {
        padding: 10px 0;
        background-color: #f9fafc;
      }
    
      #home-container{
        background-color: rgb(43,45,70);
        width: 100%;
        height: 100%;
      }
    
      /*上侧 公交站点管理系统 标题样式*/
      .title{
        position: absolute;
        left: 40px;
        top: 10px;
        display: flex;
        align-items: center;
      }
    
      /*左侧菜单导航栏菜单样式:公交站点管理、已改造站点管理。未改造站点管理*/
      #li-allStation{
        color: white;
        list-style-type: none
      }
      #li-transform{
        color: white;
        list-style-type: none;
        margin-top: 30px
      }
      #li-noTransform{
        color: white;
        list-style-type: none;
        margin-top: 30px
      }
    
      /*输入站点编码点击按钮样式*/
      #search-button{
        background-color:rgb(0,153,204);
        color: white;
        width: 100px
      }
    
      /*使用hover选择器给所有li标签添加上鼠标移入时的样式*/
      li:hover{
        cursor: pointer;/*鼠标移入,显示pointer图标*/
        background: skyblue;/*鼠标移入,显示背景颜色*/
      }
      ul{
        width: 144px;/*给菜单栏li标签添加宽度*/
      }
    </style>
    
    

    5、npm run dev启动,公共组件封装使用成功,效果界面如下:

    在这里插入图片描述

    如有不足之处,希望大佬指正。

    展开全文
  • vue引入组件的方法

    千次阅读 2018-10-11 14:47:52
    // 第一步 先使用import导入你要在该组件中使用的子组件   components:{ FormData },  //第二步 在components 注册这个组件 &lt;template&gt; &lt;div &gt; &lt;...

     

    import util from '@/util';

    import FormData from './add_student.vue';// 第一步 先使用import导入你要在该组件中使用的子组件

     

    components:{

    FormData

    }, 

    //第二步  在components 注册这个组件

    <template>

    <div >

    <FormData> </FormData>

    </div>

    </template>

    //第三步  在html中引用这个组件

    详情请参照原创博主  https://blog.csdn.net/lzzattack03x/article/details/79244687  

     

     

    展开全文
  • 这里调用了组件然后报错Unknown custom element: <...组件找不到,那么就是我引入组件的地方有问题。那就去看看 的确是有问题,因为引入组件不能用{},把它去掉就行了。 接下来说一下,如何调
  • vue引入组件库Vant步骤

    2021-03-09 20:08:22
    3.在main.js中引入 import Vue from 'vue'; import Vant from 'vant'; import 'vant/lib/index.css'; Vue.use(Vant); 4.打开对应组件库例如tabbar,在components新建文件夹Tabbar/Tabbar <template> <...
  • vue组件引入另一vue组件

    千次阅读 2019-05-17 18:08:17
    组件中引入另一组件 组件化开发,最重要的特点就是其复用性。...在当前组件card.vue中引入barBottom.vue步骤如下: 在card.vue中引入barBottom.vue: import barBottom from './barBottom.vue...
  • 文章目录一、使用场景二、使用步骤1.文件目录2.HTML代码3.js代码4.css代码(可不看,写出来只是为了代码完整性,拿来可以直接运行展示)三、总结 一、使用场景 在日常开发,经常会有这样一种情况: import A ...
  • 主要介绍了vue引入静态js文件的方法,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
  • 以上就是获取数据的步骤,之后就是在页面拿到这个获取到的数据: 首当其冲不可少的就是引用,引用vuex和引用组件: 之后在页面的jascript的export default定义组件,获取数据: 用这个方式在页面引用组件...
  • 通常我们使用的是单个文件引入,但是这样就会有很多代码是重复的,怎样才能实现vue页面引入多个组件的方法? 1. 把需要引入的文件放入到components文件夹。 2. 将components的文件引入到index.js。 index....
  • 但是在实际项目开发为了避免项目体积过于庞大,一般都是按需引入组件。 温馨提示: antd 官网有很多版本,别走错了,记住是右上角的---- 更多–> Ant Design of Vue (社区实现) 官网链接:...
  • [vue] vue组件中引入插件的方法有哪些? 插件通常用来为 Vue 添加全局功能。插件的功能范围没有严格的限制——一般有下面几种: 添加全局方法或者属性。如: vue-custom-element 添加全局资源:指令/过滤器/过渡...
  • vue脚手架引用组件4步骤

    千次阅读 2017-09-13 15:17:12
    vue脚手架引用组件的4个步骤
  • vue.js组件提供GreenSock过渡功能。 安装 yarn add vue-transition-component npm i -S vue-transition-component 文献资料 例子 我提供了一个示例设置,您可以在其中看到过渡控制器的运行情况,按照以下...
  • 引入组件3.查看结果总结 一、vue组件化开发是什么? 所谓组件化,就是把页面拆分成多个组件,每个组件依赖的 CSS、JS、模板、图片等资源放在一起开发和维护。 因为组件是资源独立的,所以组件在系统内部可复用,...
  • 从新建vue项目到引入组件Element流程

    万次阅读 2017-02-27 13:55:27
    从新建vue项目到引入组件Element 以及Error when rendering component报错解决 一、新建项目 1.打开cmd,运行:vue init webpack Vue-Demo 2.运行:cd Vue-Demo 进入这一级 3.运行:npm install 4.运行:npm run ...
  • Vue组件步骤

    2019-09-23 12:58:42
    开发一个组件,props类型为function,父类传递function的返回值给子类 1.组件注册和使用。 注册 CommonTable 组件,先引入,再导出 ...在父组件中调用对应的function 具体的function,返回字符串 3. 获取...
  • vue自定义组件步骤

    2019-09-03 14:40:59
    一、components 文件下新建文件夹test test.vue...test.vue 文件 <template> <div> <div>{{msg}}</div> </div> </template> <script> export default{ dat...
  • Vue组件的封装步骤

    千次阅读 2020-03-10 22:35:19
    Vue组件的封装步骤 当调用Vue.use()方法时,会默认调用内部的install方法,这个方法默认的第一个形参就是vue。如此我们便可以通过Vue 注册一些全局组件,给Vue 扩展一些方法。步骤如下(只是一个小例子,加深理解)...
  • (1)在index.html文件中引入百度地图 [removed][removed] (2)在webpack.base.conf.js文件内添加external选项,在module.exports内部,...(3)添加地图组件BMapComponent.vue,这里主要注意两点: a)使用BMap
  • vue中引入mixin具体步骤

    千次阅读 2019-09-19 13:13:40
    以下的描述都是在vue脚手架操作的 1.首先在assets文件夹创建一个minxin.js export const minxin = { data () { return { message: '师父', age: 22 } }, created () { this.gobeach() }, methods: { ...
  • Vue常用外部组件使用

    2019-05-24 15:19:48
    1、Vue使用axios ...//引入vue框架 import Vue from 'vue' //引入资源请求插件 import axios from 'axios' import { stringify } from 'querystring'; //axios 配置 axios.defaults.timeout = 5000;...
  • layer.js(mobile)是一个小巧方便的弹出层插件,在之前的apicloud项目被大量使用,但最近对apicloud的IDE、非常不友好的文档和极低的开发效率深感厌烦,决定弃用然后转向Vue开发。这篇文章主要介绍了vue-cli脚手架...
  • JSP如何引用Vue组件

    千次阅读 2021-02-23 09:33:18
    相信很多小伙伴都有接触过一些政府、国企、或者一些老的项目,而往往这些老项目不会重构,Vue是14年正式推出的,而那些老项目都是基于JQ、JS写的一些项目,其实在很久以前大部分公司都没有前端这个职位,前端在七八...
  • 下面记录一下使用的步骤(在Reat项目使用Vue组件与此步骤类似)。 1. 安装vuera库 vuera库地址:https://www.npmjs.com/package/vuera 首先需要在Vue项目安装vuera库,安装指令如下: // 使用yarn安装插件 yarn ...
  • vue中引入cesium

    千次阅读 2019-01-04 17:39:39
    因为个人原因,已经很久很久没有写过博客了,但是学过的东西终归还是要记录滴,以下是在vue中引入cesium,具体步骤如下 一、首先安装vue-cli,因为之前接触vue的时候都是自己手动配置webpack,感觉每一步都知道所以然...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 14,448
精华内容 5,779
关键字:

vue中引入组件的步骤

vue 订阅