精华内容
下载资源
问答
  • 在本文中小编给大家分享的是关于vue引入组件方法和先关注意点,有需要的朋友们可以学习下。
  • Vue引入公共组件

    千次阅读 2019-05-09 12:51:58
    Vue引入公共组件vue页面1需要引入子组件vue页面2子组件vue页面2内容为正常的vue页面,无需任何修改 vue页面1需要引入子组件vue页面2 1.在Vue页面1中添加 <template> <Header></Header>//直接...

    vue页面1需要引入子组件vue页面2

    1.在Vue页面1中添加

    <template>
    <Header></Header>//直接引用(要添加的子组件vue页面2  )
    </template>
    

    2.在Vue页面1中添加

    <script>
    import Header from "./PublicHeader";   //这里引入组件vue页面2的位置
    export default {
      components: {
        Header
      },//添加注册组件事件
    }
    </script>
    

    3.子组件vue页面2内容为正常的vue页面,无需任何修改**

    父子组件传参

    1.父组件传参给子组件

    父组件页面

    <template>
    <Header   :message="sendid"></Header>//直接引用(要添加的子组件vue页面2  )用v-bind动态绑定参数
     <el-button size="mini" type="danger" @click="sendmsg">动态传参数</el-button>
    </template>
    
    <script>
    import Header from "./PublicHeader";   //这里引入组件vue页面2的位置
    export default {
      components: {
        Header
      },//添加注册组件事件
      data(){
      return{
      sendid:"",
             }
      },
      methods:{
      sendmsg(){
       this.sendid = 'LHC';
      }
      }
    }
    </script>
    

    子组件页面

    <template>
    <div>
    {{message}}     //父组件传过来的值
     <el-button size="mini" type="danger" @click="putmsg">打印参数</el-button>
    </div>
    </template>
    
    <script>
    
    export default {
     props: ["message"],        //创建props,name与父组件引用子组件的v-bind属性相同
      data(){
      return{
    
             }
      },
      methods:{
      putmsg(){
     console.log(this.message)
      }
      }
    }
    </script>
    

    1.子组件传参给父组件
    子组件页面

    <template>
    <div>
     <el-button size="mini" type="danger" @click="childsendmsg">传参数</el-button>
    </div>
    </template>
    
    <script>
    
    export default {
    
      data(){
      return{
    
             }
      },
      methods:{
      childsendmsg(){
     this.$emit("listenToChildEvent",'LHC');  //在响应该点击事件的函数中使用$emit来触发一个自定义事件,并传递一个参数
      }
      }
    }
    </script>
    

    父组件页面

    <template>
    <Header   v-on:listenToChildEvent="showMsgFormChild" ></Header>//监听子组件的$emit事件,listenToChildEvent与子组件定义的相同,
    </template>
    
    <script>
    import Header from "./PublicHeader";   //这里引入组件vue页面2的位置
    export default {
      components: {
        Header
      },//添加注册组件事件
      data(){
      return{
    
             }
      },
      methods:{
        showMsgFormChild(data) {        //与上面子组件v-on事件名相同
          console.log(data);                  //打印子组件传过来的值
        },
      }
    }
    </script>
    
    展开全文
  • 主要介绍了React为 Vue 引入容器组件和展示组件的教程详解,文中很详细的给大家介绍了使用容器组件的原因,需要的朋友可以参考下
  • 今天小编就为大家分享一篇解决vue 引入组件报错的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • Vue 引入 mui 组件

    千次阅读 2019-05-27 15:25:21
    由于 我们发的项目 主要是在 移动设备上跑的,为了达到更好的体验 我们将使用 mui 来实现 更...然后我们引入 mui 组件 .js , 以及对应的 .css 应为我这边额外 需要 一个 dtpicker 组件所以我引入了 周边的 js ...

     由于 我们发的项目 主要是在 移动设备上跑的,为了达到更好的体验 我们将使用 mui 来实现 更接近原生的体验

    我在集成的时候遇到的坑 在这里和大家一起分享下

    首先我创建了一个static 文件夹。这个文件夹是用在存在第三方库的一个文件夹。

    然后我们引入 mui 组件 .js , 以及对应的  .css

    应为我这边额外 需要 一个 dtpicker 组件所以我引入了 周边的 js

    然后在你 main.js 程序的 引入 js

    import mui from '../static/mui/js/mui.js'
    import '../static/mui/js/mui.picker.js'
    import '../static/mui/js/mui.poppicker.js'
    import '../static/mui/js/mui.dtpicker.js'

    以及 css

    import '../static/mui/css/mui.css'
    import '../static/mui/css/mui.picker.min.css'

    然后我们发现 在编译状态下 允许是好的, 但是 发布就会报错。说是  vue 里面采用新的 代码标准。然而 mui 不符合这个标准

    所以我们收到把  mui 排除在这个标准之外

    然后就 可以使用了。

    我们在是用 mui.DtPicker  的时候 还是会报一个错, 大概是是 window.mui  没有被初始化

    我们在 mui.js 源码地方 发现了 被注释的地方  在这里去掉掉注释

     

     

    展开全文
  • vue引入echart组件

    千次阅读 2017-11-08 23:44:56
    vue引入echart组件 本文主要参考: http://blog.csdn.net/u013069892/article/details/70256596 ...

    vue引入echart组件

    本文主要参考:
    http://blog.csdn.net/u013069892/article/details/70256596
    http://echarts.baidu.com/tutorial.html#ECharts%20%E4%B8%AD%E7%9A%84%E4%BA%8B%E4%BB%B6%E5%92%8C%E8%A1%8C%E4%B8%BA

    好,下面上货。
    1、首先需要引入echart模块。
    npm install echarts --save

    2、然后在main.js中添加如下内容:
    import echarts from 'echarts'
    Vue.prototype.$echarts=echarts;

    3、在界面中使用echart。
    <template>
      <div>
        this is chart example<br/>
        <div>{{selected}}</div>
    
        <div>
          <div id="myChart" :style="{width: '600px', height: '500px'}"></div>
        </div>
      </div>
    </template>
    
    <script>
      import {mapGetters, mapActions} from 'vuex'
      export default {
        data () {
          return {
            msg: 'Welcome to Your Vue.js App',
            myChart: {},
            selected: {
              "直接访问": true,
              "邮件营销": true,
              "联盟广告": true,
              "视频广告": true,
              "搜索引擎": true,
              "百度": true,
              "谷歌": true,
              "必应": true,
              "其他": true
            }
          }
        },
        mounted: function () {
          let that = this;
          let myChart = this.$echarts.init(document.getElementById('myChart'));
          that.myChart = myChart;
          that.drawLine();
          that.myChart.on('legendselectchanged', function (params) {
            // 获取点击图例的选中状态
            let isSelected = params.selected[params.name];
            that.selected = params.selected;
            // 在控制台中打印
            console.log((isSelected ? '选中了' : '取消选中了') + '图例' + params.name);
            // 打印所有图例的状态
            console.log(params.selected);
          });
        },
        methods: {
          drawLine: function () {
            let option = {
              tooltip: {
                trigger: 'axis',
                axisPointer: {            // 坐标轴指示器,坐标轴触发有效
                  type: 'shadow'        // 默认为直线,可选为:'line' | 'shadow'
                }
              },
              legend: {
                data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎', '百度', '谷歌', '必应', '其他']
              },
              grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
              },
              xAxis: [
                {
                  type: 'category',
                  data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
                }
              ],
              yAxis: [
                {
                  type: 'value'
                }
              ],
              series: [
                {
                  name: '直接访问',
                  type: 'bar',
                  data: [320, 332, 301, 334, 390, 330, 320]
                },
                {
                  name: '邮件营销',
                  type: 'bar',
                  stack: '广告',
                  data: [120, 132, 101, 134, 90, 230, 210]
                },
                {
                  name: '联盟广告',
                  type: 'bar',
                  stack: '广告',
                  data: [220, 182, 191, 234, 290, 330, 310]
                },
                {
                  name: '视频广告',
                  type: 'bar',
                  stack: '广告',
                  data: [150, 232, 201, 154, 190, 330, 410]
                },
                {
                  name: '搜索引擎',
                  type: 'bar',
                  data: [862, 1018, 964, 1026, 1679, 1600, 1570],
                  markLine: {
                    lineStyle: {
                      normal: {
                        type: 'dashed'
                      }
                    },
                    data: [
                      [{type: 'min'}, {type: 'max'}]
                    ]
                  }
                },
                {
                  name: '百度',
                  type: 'bar',
                  barWidth: 5,
                  stack: '搜索引擎',
                  data: [620, 732, 701, 734, 1090, 1130, 1120]
                },
                {
                  name: '谷歌',
                  type: 'bar',
                  stack: '搜索引擎',
                  data: [120, 132, 101, 134, 290, 230, 220]
                },
                {
                  name: '必应',
                  type: 'bar',
                  stack: '搜索引擎',
                  data: [60, 72, 71, 74, 190, 130, 110]
                },
                {
                  name: '其他',
                  type: 'bar',
                  stack: '搜索引擎',
                  data: [62, 82, 91, 84, 109, 110, 120]
                }
              ]
            };
            this.myChart.setOption(option);
          }
        },
        computed: mapGetters([])
      }
    </script>

    4、最后的运行效果如下图:


    展开全文
  • Vue引入elementUI组件

    千次阅读 2019-05-22 15:27:52
    Element-Ul是饿了么前端团队推出的一款基于Vue.js 2.0 的桌面端UI框架,一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库,手机端有对应框架是Mint UI 。 中文文档:...

    Element-Ul是饿了么前端团队推出的一款基于Vue.js 2.0 的桌面端UI框架,一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库,手机端有对应框架是Mint UI 。

    中文文档:http://element-cn.eleme.io/#/zh-CN
    github地址:https://github.com/ElemeFE/element

    图片.png

    1:安装node

    端开发框架和环境都是需要 Node.js ,先安装node.js开发环境,vue的运行是要依赖于node的npm的管理工具来实现,下载https://nodejs.org/en/,安装完成之后,打开cmd开始输入命令。(我用的是win10系统,所以需要管理员权限,右键点击以管理员身份运行cmd),不然会出现很多报错。

    image

    2:查看node的版本号

    下载好node之后,以管理员身份打开cmd管理工具,,输入 node -v ,回车,查看node版本号,出现版本号则说明安装成功。

    输入命令: node -v
    
    

    image

    3:安装淘宝npm镜像

    由于npm是国外的,使用起来比较慢,我们这里使用淘宝的cnpm镜像来安装vue.
    淘宝的cnpm命令管理工具可以代替默认的npm管理工具。

    输入命令:npm install -g cnpm --registry=https://registry.npm.taobao.org
    
    

    image

    4:安装全局vue-cli脚手架

    淘宝镜像安装成功之后,我们就可以全局vue-cli脚手架,输入命令:cnpm install --global vue-cli 回车;验证是否安装成功,在命令输入vue,出来vue的信息,及说明安装成功;

    输入命令:cnpm install --global vue-cli
    
    

    image

    ####5:开始进入主题,初始化一个vue项目
    我这里是在d盘里面新建一个项目,先用d:的命令,回车键进入d盘;回车键默认创建项目信息。

    vue init webpack itemname
    

    图片.png

    出现这样的提示,初始化成功
    图片.png

    运行初始化demo,输入命令npm run dev;运行一下初始后的demo,弹出访问地址,如果没有问题则进行安装elementUI;准备好好之后,开始引入饿了么elementUI组件。

    ####6:安装 elementUI

    npm i element-ui -S
    

    快捷键ctrl+c,终止批处理操 作吗(Y/N),在输入命令npm i element-ui -S
    图片.png

    ######注意:安装过程中出现这样的bug的时候,需要解决
    图片.png
    解决办法:尝试 删除项目中的 package-lock.json 文件 和 node_modules 文件夹,然后再尝试 npm install.

    成功安装组件显示如下
    图片.png

    #####7:在components文件夹下面创建test.vue文件,复制一段elementUI官方文档的代码,进行测试
    图片.png

    <template>
    	<el-menu :default-active="activeIndex2" class="el-menu-demo" mode="horizontal" @select="handleSelect" background-color="#545c64" text-color="#fff" active-text-color="#ffd04b">
    		<el-menu-item index="1">处理中心</el-menu-item>
    		<el-submenu index="2">
    			<template slot="title">我的工作台</template>
    			<el-menu-item index="2-1">选项1</el-menu-item>
    			<el-menu-item index="2-2">选项2</el-menu-item>
    			<el-menu-item index="2-3">选项3</el-menu-item>
    		</el-submenu>
    		<el-menu-item index="3">
    			<a href="https://www.ele.me" target="_blank">订单管理</a>
    		</el-menu-item>
    	</el-menu>
    </template>
    
    <script>
    	export default {
    		data() {
    			return {
    				activeIndex: '1',
    				activeIndex2: '1'
    			};
    		},
    		methods: {
    			handleSelect(key, keyPath) {
    				console.log(key, keyPath);
    			}
    		}
    	}
    </script>
    
    

    ####8:在App.vue中引入test.vue
    图片.png

    <template>
      <div id="app">
        <img src="./assets/logo.png">
        <router-view/>
        <Test></Test>
      </div>
    </template>
    
    <script>
    	import Test from './components/test.vue'
    	
    export default {
    	components:{
      Test,
     },
      name: 'App'
    }
    </script>
    
    <style>
    #app {
      font-family: 'Avenir', Helvetica, Arial, sans-serif;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      text-align: center;
      color: #2c3e50;
      margin-top: 60px;
    }
    </style>
    
    

    ####9:打开main.js,加入element-ui的js和css

    import ElementUI from 'element-ui' //element-ui的全部组件
    import 'element-ui/lib/theme-chalk/index.css'//element-ui的css
    Vue.use(ElementUI) //使用elementUI
    

    ####10:再次运行,组件中的效果如下:

    输入命令:

    npm run dev
    

    图片.png


    原文作者:祈澈姑娘 关注「编程微刊」公众号 ,在微信后台回复「小程序」,获取小程序开发全套资料和500G编程资源教程。

    展开全文
  • 删除原有components,引入的时候,让它自动生成一份,还没搞懂什么原理,记录一下,有空研究
  • 第一步:引入组件 import Wert from "../components/HelloWorld.vue"; 第二不:挂载组件 components: { "v-wert": Wert} 第三步 使用 <v-wert></v-wert>
  • vue引入组件失效问题

    千次阅读 2019-07-07 11:48:08
    vue引入自定义组件失效,效果同未引入组件前 解决方法 组件标签如上图,也可写为如… 如上图,引入组件,组件名必须为Xxxx或xxxXxxx,同xxxXxxx的标签可写为或 注:小问题,但是困扰了我小半天 ...
  • 昨天在做一个省市县三级联动子组件,文件名称为threelink.vue,结果总是报以下错误,用了各种方法还是报错,系统引入过另一个组件fetch.vue没有问题,但这组件总是报以下错误。 Unknown custom element: - did you ...
  • vue 引入组件报错问题

    千次阅读 2018-02-24 12:16:31
     vue里面不允许使用 Html已有的标签作为自定义标签 修改方案: import header from "./components/header" import aside from "./components/aside" import footer from "./components/footer" export default { ...
  • vue动态引入组件

    千次阅读 2019-09-27 17:28:12
    vue动态引入组件 <el-main> <component :is="selectIndex" @changeMenu="selectMenu" :id="componentId" ></component> </el-main> <script> i...
  • 因为要做一个移动端需求,有一个页面是排行榜。点击下拉框是选择不同的组别渲染不同组别的排行榜那,因为项目紧张加上兼容性的要求所以打算找一个...第一步:引入iview组件 或者其中的部分组件,我只是用了一个Sel...
  • 正确应该怎么写??我自己琢磨的,怎么写怎么错。。网上没有入门的说明,只有入门后的一堆说明。...外部组件test.vue` ``` 自定义组件! export default { name: "runoob" } ```
  • Vue 引入组件、引入图片

    千次阅读 2020-03-31 16:07:36
    引入组件的两种方法 1、全局引入(在App.vue的script标签中) 1、引入(Import 变量 from 路径) import head form '@/components/head' import footer form '@/components/footer' 2、注册(注册的名字不能是html...
  • vue 异步引入组件

    千次阅读 2020-02-21 10:57:37
    // 异步操作 const LRC = Vue.component("lrc",(resolve)=>require(["../components/LRC"],resolve)) 在引入组件的script中操作
  • vue脚手架引入了vant组件,我采用的是按需导入,在局部组件用到时,就在局部调用,其它组件局部调用都没什么问题,但当我用到了Dialog组件时就报错了,局部调用Dialog的代码如下: import {Field,Picker,Popup,...
  • Step1,首先在components创建一个公共的目录,NoDatas目录里边包含index.vue和index.js,index.vue用来写公共的页面,index.js用来导出这个组件。 <template> <!-- NoDataWords 可以灵活控制每个页面显示...
  • vue 引入组件方式

    千次阅读 2019-05-19 10:44:46
    这里提供两种方式引入组件; 1 import导入所需组件(正常加载) 2 require方法导入组件 用于路由配置页面: (1)实现(懒加载) 注意:这里的@ 相当于.. (2)路由配置页面使用require引用组件 1)...
  • 以下以在父组件(conponent.vue)中引入组件(conponent.vue)为例讲解如何制作和引入组件: 1、先创建一个单独的icoponent.vue模板 <template> <div>子组件</div> </template> &...
  • -header.vue main -main.vue (这里是用uni App为例子) header.vue(就是普通的页面没有特殊之处,例如) <template> <view> 这里是header页面 </view> </template> <script&...
  • vue引入其他框架组件方法汇总

    千次阅读 2017-10-13 14:43:46
    一、引入jQuery框架: 首先在当前项目的根目录下(就是与package.json同目录),运行命令cnpm install jquery --save-dev 这样就将jquery安装到了这个项目中。 然后修改webpack.base.conf.js两个地方: 其一:...
  • vue组件引入另一vue组件

    千次阅读 2019-05-17 18:08:17
    组件引入另一组件 组件化开发,最重要的特点就是其复用性。...在当前组件card.vue引入barBottom.vue的步骤如下: 在card.vue引入barBottom.vue: import barBottom from './barBottom.vue...
  • Vue引入components以及父子组件方法调用和参数传递 父组件parent.vue引入 组件 child.vue // 父组件引入子组件 <template> <div> <dataSource @getLink="getMyLink" :objData="data" ref=...
  • VUE3.0引入vant组件

    千次阅读 2020-09-10 15:33:05
    VUE3.0引入vant组件引入通过 npm 安装通过 yarn 安装组件挂载组件使用 目前Vant 3 是基于 Vue 3 开发的,在使用 Vant 3 前,请将项目中的 Vue 升级到 3.0 以上版本。 引入 通过 npm 安装 在现有项目中使用 Vant 时...
  • vue怎么引入组件

    2019-12-12 09:44:28
    第一步:例子是在aboutUs.vue界面引入组件sideFloating.vue,如下图 第二步:给子组件sideFloating.vue命名一个全局的id <script type="text/ecmascript-6"> export default { name:'indexFloating', } ...
  • vue项目引入swiper组件

    千次阅读 2018-11-29 19:47:21
    swiper官网: ...安装 在vue引入swiper组件 1.安装swiper3的最新版本3.4.2: npm i swiper@3.4.2 -S 这里一个小知识,查看node包的所有版本号的方法: npm view 包名 versions` 2.在入口文件m...
  • vue引入组件的方法

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

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 89,284
精华内容 35,713
关键字:

vue引入其他组件

vue 订阅