精华内容
下载资源
问答
  • 1、首先是如何给你定义的变量拿到数据: 这里我自己用的是vuex: 首先在你项目的src文件夹下创建这么一个目录: 之后就要在index.js中将homedatas.js(拿数据的js)共享出去,使页面能拿到数据, 以下是index....

    1、首先是如何给你定义的变量拿到数据:
    这里我自己用的是vuex:
    首先在你项目的src文件夹下创建这么一个目录:
    在这里插入图片描述
    之后就要在index.js中将homedatas.js(拿数据的js)共享出去,使页面能拿到数据,
    以下是index.js的代码:
    在这里插入图片描述
    随后就是在homedatas中获取数据了,以下是homedatas.js代码:
    在这里插入图片描述
    以上就是获取数据的步骤,之后就是在页面中拿到这个获取到的数据:
    首当其冲不可少的就是引用,引用vuex和引用组件:
    在这里插入图片描述
    之后在页面的jascript中的export default中定义组件,获取数据:

    在这里插入图片描述
    用这个方式在页面中引用组件,然后再自定义标签中将数据传递给组件:
    在这里插入图片描述

    2、子组件中获取父组件传递过来的数据:
    props中定义属性,这是之前在页面自定义标签中设置的三个属性,分别控制组件中的不同部分,定义每个属性的类型、默认值以及测试函数,注意测试函数一定要return一个值,不然页面会报错,测试函数的参数就是传递过来的值:
    在这里插入图片描述
    scrolldatas是一个数组,之后便是循环遍历这个数组中的元素,数组中的值就能展示在页面了,页面元素会随着数组元素的改变而改变:
    在这里插入图片描述

    之后就是其他两个变量怎么在组建中引用了:
    首先我要在测试函数中判断一下,这个传进来的值符合不符合要求,如果不符合,那就不执行测试函数,就是默认值,如果符合要求,执行函数,并在函数中改变默认值,赋值给相应自定义变量:
    在这里插入图片描述
    之后就是调用函数,调用函数中传入参数,这个参数现在的值不是最开始var的初始值,而是后来测试函数中因为符合测试函数的条件后来赋给的值(因为window.onload直到页面加载才会执行):
    在这里插入图片描述
    之后就要在需要用到这个变量的函数中传一个参数(speed,这个speed的值就是上面changespeed的值):
    在这里插入图片描述

    所以经过一会说那个的操作,只要在获取数据的地方修改值,页面效果就会随之改变,不需要再组件中修改任何东西:
    在这里插入图片描述

    展开全文
  • 小程序ui组件我发现几个还是不错的 1.iView是TalkingData发布的一款高质量的基于Vue.js组件库,而iView weapp则是它们的小程序版本。 GitHub地址:https://github.com/TalkingData/iview-weapp 2.Wux WeApp也是一个...

    小程序ui组件我发现几个还是不错的
    1.iView是TalkingData发布的一款高质量的基于Vue.js组件库,而iView weapp则是它们的小程序版本。
    GitHub地址:https://github.com/TalkingData/iview-weapp
    2.Wux WeApp也是一个非常不错的微信小程序自定义 UI 组件库,组件比较丰富,值得使用。
    GitHub地址:https://github.com/wux-weapp/wux-weapp
    3.ColorUI是一个Css类的UI组件库!不是一个Js框架。相比于同类小程序组件库,ColorUI更注重于视觉交互!
    其组件在美观性方面比较突出。
    GitHub地址:https://github.com/weilanwl/ColorUI
    我这个比较喜欢
    还有
    MinUI
    MinUI 是蘑菇街前端开发团队开发的基于微信小程序自定义组件特性开发而成的一套简洁、易用、高效的组件库,适用场景广,覆盖小程序原生框架,各种小程序组件主流框架等,并且提供了专门的命令行工具。
    GitHub地址:https://github.com/meili/minui

    ZanUI WeApp
    ZanUI WeApp是有赞移动 Web UI 规范 ZanUI 的小程序实现版本,结合了微信的视觉规范,为用户提供更加统一的使用感受。
    现已包含 badge、btn、card、cell、dialog、icon、label、noticebar、panel、popup、switch、tab、toast、tooltips 等组件或元素。
    GitHub地址:https://github.com/youzan/zanui-weapp
    npm下载:npm i zanui-weapp
    另外,ZanUI也使用mpvue重写了zanui-weapp,实现了其中所有组件,为使用mpvue的开发者提供了方便。
    GitHub地址:https://github.com/samwang1027/mpvue-zanui
    npm下载:npm i mpvue-zanui

    都有写怎么调用这些组件,下载上文件,把需要的组件放到你的项目中引用可以了
    方便很多,可以减少很多开发时间

    如果你引用自己的公共文件,例如comm.js

    const comm=[name:'张三',age:18]
    funtion age(){
    	return num= 1
    }
    module.exports={
      comm: comm,
      age:age
    }
    

    上面的 comm变量 引用以及 方法age() 调用,
    在最后必须写上
    module.exports={
    comm: comm,
    age:age
    }
    如果不写的话其他文件调用是拿不到的。

    公共页面comm.js这个文件放到 utils文件中

    const comm=[name:'张三',age:18]
    funtion age(){
    	return num= 1
    }
    module.exports={
      commFunt: comm,
      ageNum:age
    }
    

    index.js文件调用

    const comm = require('../../utils/comm.js)
    //这里引用路径要注意你的文件地址
    Page({
    	data:{
    		age:'',
    		num:''
    	},
    	onLoad(){
    		let age = comm.ageNum
    		let num = comm.commFunt
    		this.setData({
    			age:age,
    			num:num
    		})
    	}
    })
    

    引用组件你要在json文件中声明引用的文件
    在这里插入图片描述
    在这里插入图片描述
    navigationBarTitleText 是设置的标题文字
    usingComponents是你引用组件写的地方
    i-icon 名字是自己起 不要有大写。后面跟着你引用组件的地方
    在这里插入图片描述
    我的dist就是放的组件的文件
    引用后再wxml文件方标签的时候 要用你起的名字

    <i-icon></i-icon>
    //里面传什么参数就根据你引用组件的需求了,一边你引用的组件都有自己的api  你可以看看需求
    
    展开全文
  • EventEmitter的方式实现父组件从子组件从获取到变量,因为之前的在父组件的html文件中使用子组件的选择器会出现页面的不兼容,后来偶然发现除了使用上面的这种方式还可以使用模型驱动的方式让子组件变量的值传到...

    之前写过一篇关于组件之间通讯的博客,是使用@Output + EventEmitter的方式实现父组件从子组件从获取到变量,因为之前的在父组件的html文件中使用子组件的选择器时会出现页面的不兼容,后来偶然发现除了使用上面的这种方式还可以使用模型驱动的方式让子组件中的变量的值传到模型的具体变量中去,这样就可以间接地实现获取子组件的变量(因为它需要通过模型这个步骤而不是直接在子组件中获取变量,但是实现起来的效果是一样的,而且绕开了在父组件中去使用子组件的选择器,使得页面不会出现不兼容)。下面讲一下具体步骤以及具体的代码:

    (1) 创建一个模型

      export class BarcodeModel{
       public codeResult: string
    }

    (2) 创建一个服务
    这个服务主要是用于对模型的实例化操作,并提供对这个实例对象的操作方法比如setting()或者getting()供外部调用,而且这么写会使整个结构清晰明了,提高代码的可重复性,比如如果你把写在service中的代码写在子组件中的活,结构看起来就很混乱。

     export class BarcodeService {
    
        barcodeModel:BarcodeModel={
            codeResult:''
        }
    
        constructor() {
            if (localStorage.getItem("barcodeModel")!=null) {              this.barcodeModel=JSON.parse(localStorage.getItem("barcodeModel"));
            }
         }
        //获取当前的实例对象
        getSettings(){
            return this.barcodeModel;
        }
        //对实例对象进行存储的操作,JSON.stringify()是将对象转换以json的字符串形式来表示,详细可以去查看JSON的文档
        changeBarcode(barcodeModel:BarcodeModel){               localStorage.setItem("barcodeModel",JSON.stringify(barcodeModel));
        }
    }

    (3)在子组件中将想要传递的变量赋值给模型中的变量,然后调用service中的方法进行存储

    export class MediaStreamComponent  {
        barcodeModel:BarcodeModel;
       constructor(barcodeService:BarcodeService) {
         this.barcodeModel = this.barcodeService.getSettings();
      };
        this.barcodeModel.codeResult = this.lastResult;
        this.barcodeService.changeBarcode(this.barcodeModel);                               
    }
    

    (4)在父组件中直接调用模型中的变量即可

    export class ShippingComponent{
        private code;
        constructor(private serviceBarcode: BarcodeService){}
       this.code = this.serviceBarcode.getSettings().codeResult;
    }

    总结

    Created with Raphaël 2.1.0子组件子组件模型模型父组件父组件将变量赋值给模型中的变量将存储在模型中的变量获取过来赋值给自己的变量

    总的来说就是将模型当作搬运工,从子组件中获得变量并存储起来,然后父组件就可以很轻松的获取到模型中这个变量的值,思路很清晰,代码也不复杂,希望对你有帮助,记得上面的代码套入你的项目的时候要引入service的路径,因为每个人的路径不一样所以就没写上去了。

    展开全文
  • 函数组件内容如下,主要使用到了react hook, https://react.docschina.org/docs/hooks-overview.html hook概览 https://react.docschina.org/docs/hooks-faq.html#can-i-make-a-ref-to-a-function-component ...

     

     

    函数组件内容如下,主要使用到了react hook,

    https://react.docschina.org/docs/hooks-overview.html   hook概览

    https://react.docschina.org/docs/hooks-faq.html#can-i-make-a-ref-to-a-function-component

    import React, {useState,  useRef, useImperativeHandle, forwardRef } from 'react';
    const Container = forwardRef((
      props,
      ref,
    ) => {
      const cref = useRef()
      const [value, setValue] = useState('')
      const handleClear = () => {
        console.log('handle clear')
      }
      useImperativeHandle(ref, () => ({
        handleClear,
        inputValue: cref.current.value 
      }))
      const changeValue = (e) => {
        setValue(e.target.value)
      } 
      return (
        <div>
          <h1>test</h1>
          <input ref={cref} value = {value} onChange={changeValue}></input>
        </div>
      )
    })
    
    export default Container;
    

    在父组件中

    引入Container组件后,在constructor()里

    constructor() {
        super();
        this.containerRef = React.createRef()
      }

    render() 

    <div>
      <button onClick={this.test}>test</button>
      <Container ref={this.containerRef}  />
    </div>

    test按钮触发的函数

      const test = () => {
        console.log(this.containerRef)
        this.containerRef.current.handleClear()
        console.log(this.containerRef.current.inputValue)
      }

    参考https://www.jianshu.com/p/11198c03a038

    展开全文
  • uniapp全局引用less的变量

    千次阅读 2020-08-27 13:44:56
    uni-app官方文档直达 PS:... } 好了,解决完之后再了解下为什么要这么做,因为less再App.vue直接@import的话,只能有样式可以用,而less的变量用不了,如果不配置config的话,要使用变量的话只能在每个组件单独引入。
  • 熟悉Angular7的同学都知道,在Angular7中想要监听组件内部的点击事件是非常简单的——只需要使用(click)事件绑定到组件,再向组件的实例中传入一个函数就搞定了。然而,当你想要监听组件外面的点击事件时,事情就变...
  • vue组件引入scss变量Using the Vue CLI you can enable “CSS Preprocessors” and you can choose which one to enable: 使用Vue CLI,您可以启用“ CSS预处理程序”,还可以选择启用哪个: If you’re using ...
  • 模板引用变量通常是对模板中 DOM 元素的引用。它还可以引用指令(包含组件)、元素、TemplateRef 或 Web Component — angular中文文档 示例 <nz-table #filterTable [nzData]="listOfData"> <thead> ...
  • 在页面内部的js里面可以直接这样取服务组件的id: ... js代码: $("#") 因为服务器组件的id有可能经过...比较简单的方法是在内部js先把这些id取出来,存在js的全局变量里,然后外部的js再通过这个全局变量去取。
  • 1为引入默认组件命名为ReactDOM,2为引入render这一组件。在react的使用中,必须要引入React和render 使用时前者为点后者为直接使用,export暴露的组件,需要引入React或者react下的{Component}调用方式,前者为点 ...
  • Vue引入外部js变量和方法

    千次阅读 2020-09-18 13:46:31
    外部js文件 //定义变量或常量 const name ='张三' //定义方法test function test () { const text="Hello World" alert(text) } //导出设置使得Vue可引入,关键 export { test, name } Vue组件 <template>...
  • 10.React Native之常量、变量组件

    千次阅读 2019-03-18 15:05:48
    目录 1.变量定义 1.1代码块变量 1.2成员变量 1.3常量(const) ...代码块变量的作用域主要在方法内部,外部无法访问代码块变量,在ES6通常用let命令定义,示例如下: 1.2成员变量 成员变量主要在整个类(Co...
  • 问题:在被调用的js中使用组件实例的this,实现参数的传递。 最近公司需要修改项目的框架,统一用vue的框架,以前的代码需要移植到统一的框架中,我负责的模块以前是用backbone.js的框架写的,尝试过使用vue.watch...
  • 小程序属于Mini架构,不属于mvvm架构,所以它的自定义组件并没有进行缓存,由于自定义组件并未缓存,所以自定义组件从父组件接收的引用类型参数值被改变时,自定义组件的父组件引用类型参数值不能实时更新 ...
  • 本博文主要为了解决某些特殊情况下,需要通过调用index.html的全局function,从而达到调用vue组件里面对应的方法,并且能够修改对应vue组件里面变量属性。 特殊情况例如:写个安卓app使用webview组件,然后h5页面是...
  • 让React应用与外界进行通信的方法,是在使用ReactDOM.render()方法进行渲染时,把引用赋值给一个变量,然后在外部通过该变量访问组件: 现在就可以通过myTextAreaCounter访问组件的方法和属性,就像是在组件的...
  • 这个时候,我们就需要先得到组件引用,进而通过该引用组件进行操作。 一、组件引用 1,普通组件引用 在某个组件的 JSX 代码描述中加入 ref={某字符串},就可以定义一个组件引用名称。
  • 例:我们在写项目的时候会遇到加载本地城市列表的数据,如果放到vue组件里,是极其的不方便,我们来看看怎么解决这个问题。 解决方法 引入js的某个方法 方法一 1.在公共js里写方法并export导出。 export function ...
  • 这个问题真的是太搞了 首先,在main.js中@引入文件,webpack不会识别。(修改成相对路径也没用,亲测无效)。 1、安装:node-sass、sass-loader、...2、安装:sass-resources-loader (如果不安装的话变量会报错) npm
  • 【vue】如何引用外部cdn资源

    万次阅读 2018-01-01 22:45:26
    下面以引用腾讯地图api为例,介绍如何正确引用外部cdn资源.在index.html头部引用&lt;script src=&quot;http://map.qq.com/api/js?v=2.exp&amp;key=yourkey&quot;&gt;&lt;/script&gt; 修
  • 输入gacutil -i Microsoft.VisualStudio.Shell.Interop.11.0.dll 这个时候便会出现错误gacutil不是批处理文件,不是内部或外部的命令,原因是没有找到该文件 解决方法:将gacutil路径添加到环境变量上 1.在win10搜索...
  • vue-cli项目引用外部js代码

    千次阅读 2017-08-17 13:34:31
    vue-cli项目引入外部js以及外部js文件中定义的变量
  • 在日常开发中,我们会经常遇到引用其他现有的组件库的情况,以现有项目为例,我们会常常引入hui-pro,hui-pro组件库是不同的人编写,会有不同打包输出方式,有些包是遵循commonjs规范,有些包是遵循es6规范,在海豚...
  • vue项目中,单独的组件引用对应的css样式 根据项目具体的文件路径配置,引入在当前页面路径下的css 示例中,login.css文件放在src文件夹下的assets文件夹下css文件夹内。 注: 此文章记录不是在main.js里引入,...
  • 上一章我们说了自定义组件header 和 listview,不过内部模板...组件实际上可以通过外部设置组件内部暴露的一些属性 才能在不改变代码的情况下复用。这一章将说怎么封装组件header达到外部设置title、登录注册的超链接。
  • 在基于iView的后台项目中,表格组件是我们的老朋友了。实现如下的效果更是最基本的需求: 开始 在iView早期1.x的版本(其实在~2.0.0-rc.7也能使用),想要渲染这样的效果,代码如下: 升级2.x后,Table组件的...
  • 组件系统是Vue.js其中一个重要的概念,它提供了一种抽象,让我们可以使用独立可复用的小组件来构建大型应用,任意类型的应用界面都可以抽象为一个组件树: 组件的基本使用 和创建一个vue实例需要创建后才能使用类似...
  • Angular4 - 组件

    千次阅读 2018-02-10 23:06:15
    @Component装饰器,它把紧随其后的类标记成了组件类。 @Component里面的元数据会告诉 Angular 从哪里获取你为组件指定的主要的构建块。 @Component装饰器能接受一个配置对象, Angular 会基于这些信息创建和展示组件...
  • 1、在template中 标签上:直接属性名 文本:{{属性名}} 2、在template以外 this.属性名

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 69,869
精华内容 27,947
关键字:

引用的组件的外部变量