精华内容
下载资源
问答
  • vue在开发页面时引用组件报错 在使用vue开发页面时报如下错,到处问题,components的注入也是写正确的 ...后来才发现是这里引入写错了,引入组件不能写{} 改成下面这种就可以了 记录下工作中的坑~ ...

    vue在开发页面时引用组件报错

    在使用vue开发页面时报如下错,到处找问题,components的注入也是写正确的

    在这里插入图片描述
    后来才发现是这里引入写错了,引入组件不能写{}
    在这里插入图片描述
    改成下面这种就可以了
    在这里插入图片描述
    记录下工作中的坑~

    展开全文
  • 关于vue报错,组件找不到

    千次阅读 2018-02-24 09:52:11
    这个报错 一直觉得很神奇,我的组件明明注册了,也import进来了 路径也是对的,什么还是报错呢? 后来发现,原来在components里面没注册。。。。。 ...

    这个报错  一直觉得很神奇,我的组件明明注册了,也import进来了  路径也是对的,为什么还是报错呢?

    后来发现,原来在components里面没注册。。。。。

     

    展开全文
  • 假设有个需求,父组件修改颜色,父组件会把该颜色传组件,子组件每次点击会打印当前自己state里面的颜色。 这里子组件有两个监听事件,一个是原生dom的监听方式,一个是react提供的监听,再测试的时候发现二者...

    项目中使用postal订阅方法时,使用react hooks useEffect去监听方法时,发现取到的state一直是旧的值,然后重写了例子。

    假设有个需求,父组件修改颜色,父组件会把该颜色传到子组件,子组件每次点击会打印当前自己state里面的颜色。

    这里子组件有两个监听事件,一个是原生dom的监听方式,一个是react提供的监听,再测试的时候发现二者表现不同,所以写了两个。

    其他前端有趣的例子和坑合集:https://github.com/wqhui/blog
    直接预览:https://codepen.io/Lik_Lit/pen/jOPJbbG

    //子组件代码
    function Content ({theme}){
      const [themeState,setTheme] = React.useState(theme)
      const [reactThemeState,setReactThemeState] = React.useState({})
      const [nativeThemeState,setNativeThemeState] = React.useState({})
      const ref = React.useRef(null)
          
        const fun = (e)=>{
          e.target.innerText=== 'react点击' ? setReactThemeState(themeState):setNativeThemeState(themeState)
        }
        
        //1.按照以前的写法,在didMount监听一次就可以
        React.useEffect(()=>{ //监听click
          ref.current.addEventListener('click',fun)
          return ()=>{
            ref.current.removeEventListener('click',fun)
          }
        },[])
        
         React.useEffect(()=>{//props 改变 设置state
          setTheme(theme)
        },[theme])
        
        return (
          <div>
            <p>当前颜色:{themeState.foreground}</p>
            <div className='button-area'>
              <div onClick={fun}>react点击</div>
              <div ref={ref} >原生点击</div>
            </div>
            <p>react监听点击时颜色:{reactThemeState.foreground}</p> 
            <p>原生监听点击时颜色:{nativeThemeState.foreground}</p>
          </div>
        );
       
    }
    

    一开始点击显示颜色都是正常的,但是当我点击父组件切换了颜色的时候,发现二者输出的颜色不同,
    在这里插入图片描述
    这是由于hooks useEffect监听时监听方法里的依赖参数,应当写到useEffect第二个参数里,我这个原生监听依赖于state里面的themeState,所以得对监听的useEffect做个修改

        React.useEffect(()=>{ //监听click
          ref.current.addEventListener('click',fun)
          return ()=>{
            ref.current.removeEventListener('click',fun)
          }
        },[themeState])//themeState改变则重新监听 这里改成props的theme也是错误的
    

    这个时候监听方法取到到state就是新的值
    在这里插入图片描述

    展开全文
  • 与HTML元素一样,一个组件是指从组件开始标签结束标签的所有代码,由于组件可能会被转译不同端对应的代码,所以在页面创建过程中,能使用小程序组件标签以外的标签。 组件定义及属性 1)组件是视图层的基本...

    小程序定义了各种各样的组件,它们在WXML中起着各不同的作用。与HTML元素一样,一个组件是指从组件开始标签到结束标签的所有代码,由于组件可能会被转译为不同端对应的代码,所以在页面创建过程中,不能使用小程序组件标签以外的标签。

    组件定义及属性

    1)组件是视图层的基本组成单元

    2)组件自带一些功能与微信风格的样式

    3)一个组件通常包括开始标签和结束标签,属性用来修饰这个组件,内容在两个标签之内

    按类型可以将组件划分为七大类:视图容器、基础内容、表单、导航、多媒体、地图、画布

    一个完整的组件结构如下:

    <tagname property="value">contents</tagname>

    组件可以通过属性进行配置,属性只能用在开始标签或单个自闭合标签上,不能用于结束标签。一个组件可以对应多个属性,属性具有名称和值两部分,组件的属性名称都是小写,以连字符“-”连接。组件属性分为所有组件都有的共同属性和组件自定义的特殊属性。

    1.组件的共同属性

    • id:组件的唯一表示,保持整个页面唯一。
    • class:组件里的样式类,在对应的WXSS中定义的样式类。
    • style:组件的内联样式,可以动态设置的内联样式。使用方式同HTML标签style属性。
    • hidden:组件是否显示,所有组件默认显示。
    • data-*:自定义属性,组件上触发事件时,会发送给事件处理函数。事件处理函数可以通过datascl获取。
    • bind*/catch*:组件的事件,绑定逻辑层相关事件处理函数。bind为冒泡事件,catch为非冒泡事件。

    除上述属性以外几乎所有组件都有自定义属性,可以对该组件的功能或样式进行修饰,具体参考各个组件的定义。

    2.组件的属性类型

    每个属性都有其对应的类型,使用时应给属性值传入对应的类型值,属性按类型可分为:

     

    • Boolean:布尔值,组件写上该属性,不管该属性等于什么,其值都为true,只有组件上没有写该属性时,属性值才为false。如果属性值为变量,变量的值会被转换为Boolean类型。
    • Number:数字。
    • String:字符串。
    • Array:数组。
    • Object:对象。
    • EventHandler:事件处理函数名。
    • Any:任意属性。

    视图容器

     

    有过前端经验的同学都了解,在前端项目中我们常使用DIV+CSS进行页面布局,其中<div/>没有任何语义和功能,仅作为容器元素存在,在小程序中,有一套类似<div/>的容器组件,那就是<view/>、<scroll-view/>和<swiper/>。在HTML中大部分标签内部能嵌套任何标签,如<div/>、<span/>、<section/>、<p/>等,但是在小程序中,大部分组件都有它自己特殊的功能和意义,标签都有特定的用法,内部也只能嵌套指定的组件,而容器组件内部能嵌套任何标签,容器组件是构建布局的基础组件。本小节主要介绍视图类容器。

    View组件

    <view/>是一个块级容器组件,没有特殊功能,主要用于布局展示,是布局中最基本的UI组件,任何一种复杂的布局都可以通过嵌套<view/>组件,设置相关WXSS实现。<view/>支持常用的CSS布局属性,如display、float、position甚至Flex布局等,熟悉DIV+CSS的人应该很容易上手

    <view/>具备一套关于点击行为的属性:

    • hover:是否启动点击态,默认值为false
    • hover-class:指定按下去的样式,当hover-class="none"时,没有点击态效果,默认值为none
    • hover-start-time:按住多久出现点击态,单位毫秒,默认值为50
    • hover-stay-time:手指松开后点击态保留时间,单位毫秒,默认值为400

    1)水平3栏布局

    示例代码如下:

    <view style="display:flex;">
      <view style='background-color:red;flex-grow:1;height:180rpx;'></view>
      <view style='background-color:blue;flex-grow:1;height:180rpx;'></view>
      <view style='background-color:green;flex-grow:1;height:180rpx;'></view>
    </view>

    执行结果如下:

    2)左右混合布局

    示例代码如下:

    
    <view style='display:flex;height:400rpx;'>
      <view style='background-color:red;width:250rpx;color:#fff;'>1</view>
        <view style='flex-grow:1;display:flex;flex-direction:column;'>
        <view style='flex-grow:1;background-color:blue;color:#fff;'>2</view>
        <view style='flex-grow:1;background-color:green;color:#fff'>3</view>
      </view>
    </view>

    执行结果如下:

    3)上下混合布局

    示例代码如下:

    <view style="display:flex;flex-direction:column;height:400rpx;">
      <view style='background-color:red;height:150rpx;color:#fff;'>1</view>
      <view style='flex-grow:1;display:flex;'>
      <view style="flex-grow:1;background-color:blue;color:#fff;">2</view>
      <view style='flex-grow:1;background-color:green;color:#fff'>3</view>
      </view>
    </view>

    执行结果为:

    通过上面案例可以发现,任何复杂的布局都是通过不断嵌套<view/>实现的,在小程序中使用<view/>就像我们在HTML使用<div/>一样边界,通过<view/>我们可以构建我们想要的任何页面。

    Scroll-view组件

    在布局过程中,我们需要一些容器具备可滑动的能力,尽管我们可以通过给<view/>设置overflow:scroll属性来实现,但由于小程序实现原理中没有DOM概念,我们没法直接监听<view/>滚动、触顶、触底等事件,这时便需要使用<scroll-view/>。<scroll-view/>在<view/>基础上增加了滚动相关属性,通过设置这些属性,我们能响应滚动相关事件。<scroll-view/>属性如下:

    • scroll-x:允许横向滚动,默认为false
    • scroll-y:允许纵向滚动,默认为false
    • upper-threshold:距顶部/左边多远时(单位px),触发scrolltoupper事件,默认值为50
    • lower-threshold:距底部/右边多远时(单位px),触发scrolltolower事件,默认值为50
    • scroll-top:设置竖向滚动条位置
    • scroll-left:设置横向滚动条位置
    • scroll-into-view:值应为某子元素id,滚动到该元素时,元素顶部对齐滚动区域顶部
    • bindscrolltoupper:滚动到顶部/左边,会触发scrolltoupper事件
    • bindscrolltolower:滚动到底部/右边,会触发scrolltolower事件
    • bindscroll:滚动时触发,event.detail = {scrollLeft,scrollTop,scrollHeight,scrollWidth,deltaX,deltaY}

    目前,有些组件不能在<scroll-view/>中使用:<textarea/>、<video/>、<map/>、<convas/>

    下面我们创建一个可滚动视图区,示例代码如下:

    <scroll-view class="scroll-container" upper-threshold="0"
    lower-threshold="100" scroll-into-view="{{toView}}"
    bindscroll="scroll" bindscrolltolower="scrollToLower"
    bindscrolltoupper="scrollToUpper" scroll-y="true"
    scroll-top="{{scrollTop}}">
    <view id='item-1' class='scroll-item bg-red'>1</view>
    <view id='item-2' class='scroll-item bg-blue'>2</view>
    <view id='item-3' class='scroll-item bg-red'>3</view>
    <view id='item-4' class='scroll-item bg-blue'>4</view>
    <view id='item-5' class='scroll-item bg-red'>5</view>
    <view id='item-6' class='scroll-item bg-blue'>6</view>
    </scroll-view>
    <view class='act'>
    <button bindtap='scrollToTop'>点击滚动到顶部</button>
    </view>
    
    .scroll-container{
      border:solid 1px;
      height: 2400rpx;
    }
    .scroll-container.scroll-item{
      height: 300rpx;
      width:120%;
    }
    .bg-blue{background-color: #87CEFA;height: 400rpx;}
    .bg-red{background-color: #FF6347;height: 400rpx;}
    .act{padding: 10px;}
    
    
    Page({
      data: {
        toView:'item3'//第一次渲染时,<scroll-view>默认滚动到id值为"item-3""区域
      },
      scrollToUpper:function(){
        console.log('触发到滚动顶部事件');
      },
      scrollToLower:function(){
        console.log("触发滚动到底部事件");
      },
      //点击按钮时,滚动到顶部
      scroll:function(){
        console.log('触发了滚动事件');
      },
      scrollToTop:function(){
        this.setData({
          scrollTop:'0'
        });
      }
    });
    

    执行结果如下:

    滑块视图组件

    滑块视图容器在前端开发中是一个常见组件,利用它我们可以实现轮播图、滑动页面、图片预览效果等。一个完整的滑块视图组件由<swiper/>和<swiper-item/>连个标签组成,它们不能单独使用,一个<swiper/>中只能放置一个或多个<swiper-item>,放置其他节点会被删除,<swiper-item/>内部能放置任何组件,默认宽高自动设置为100%。<swiper-item/>组件作为容器没有任何特殊属性,<swiper/>组件属性如下:

    • indicator-dots:是否显示面板指示点,默认值为false
    • autoplay:是否自动切换,默认为false
    • current:当前所在页面的index,默认值为0
    • interval:自动切换时间间隔,默认值为5000
    • duration:滑动动画时长,默认值为1000
    • circular:是否采用衔接动画,默认值为false
    • bindchange:current改变时会触发change事件,event.detail={current:current};

    1)基本轮播图

    示例代码如下:

    <swiper class="banner" indicator-dots="true" autoplay="{{autoplay}}"
    current='0' interval='2000' duration='300' bindchange='change'>
      <block wx:for="{{sliderList}}">
      <swiper-item class="{{item.className}}">{{item.name}}</swiper-item>
      </block>
    </swiper>
    <view>
      <button bindtap='play'>暂停|播放</button>
    </view>
    .banner{height: 400px;background-color: #ddd;}
    .bg-blue{background-color: #87CEFA;}
    .bg-red{background-color: #FF6347;}
    .bg-green{background-color: #43CD80;}
    
    Page({
      data:{
        autoplay:true,
        sliderList:[
          { className: 'bg-red', name: 'slider1' },
          { className: 'bg-blue', name: 'slider2' },
          { className: 'bg-green', name: 'slider3' }
        ]
      },
      play:function(){
        this.setData({
          autoplay:!this.data.autoplay
        });
      },
      change:function(){
        console.log('执行了滚动');
      }
    });
    

    执行结果如下:

    2)自定义轮播图

    <swiper/>默认组件中不能提供面板指示点的样式设置,而在轮播组件中,我们常常需要设置自定义面板指示点,这时可以通过bindchange事件来实现

    示例代码如下:

    <swiper indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}">
        <block wx:for="{{image}}">
          <swiper-item>
             <image style='width:100%;height:100;' src='{{item}}'></image>
          </swiper-item>
        </block>
      </swiper>
    Page({
    
      data:{
        image:[
          'images/un1.jpg',
          'images/un2.jpg', 
          'images/un3.jpg'
        ],
        indicatorDots: true,  //是否显示面板指示点
        autoplay: true,      //是否自动切换
        interval: 3000,       //自动切换时间间隔
        duration: 1000,       //滑动动画时长
        
      }
    });

    执行结果如下:

    具体WXSS这里就不显示了,希望大家能够自己尝试一下,其中图片路径不要搞错!

    展开全文
  • 工作时,它接收一组包的名称,然后在这些包内扫描所有的类,查找其中符合条件的bean组件定义并将这些bean组件定义注册容器。这些bean定义注册容器时具体使用的类ScannedGenericBeanDefinition,这是Spring bean...
  • Vue中的组件必须定义为一个方法,因为不定义为方法会报错。。。 定义如下组件: &lt;template id="temp1"&gt; &lt;div&gt; &lt;p&gt;总共被点击了{{count}}次&lt;/p&gt...
  • 有一个自定义的组件页面,当其他页面通过 标签或者 wx.navigateTo({ }) 方法要跳转组件页面时,会报出 navigateTo:fail page “…” is not found 的错误。 关于跳转url出错的原因有一下几点: 页面路径是否在...
  • 一、现象 父组件中引入了一个弹框组件,并传递props——... 当父组件中执行openSetFieldDialog方法时,columnField的值发生了变化,但子子组件并没有监听。 二、原因 我在父组件的data中定义columnField...
  • vue 父组件请求数据,子组件获取不到值。propsundefined 解决办法就是 在渲染的时候给组件标签上面加一个条件渲染,在父组件请求完成后,将数据赋值,然后将渲染表达式成立; 示例 子组件A <div> 我...
  • 问题描述:父组件里面有一个轮播图,这个轮播图我封装了一下,封装成了一个组件了这个页面里面,我们产品的需求是,根据页面获取的婚姻状态做判断,第二张图片的链接点进去显示不同的文章,意思就是根据婚姻...
  • Vue组件之入门:全局组件三种定义

    千次阅读 2018-11-05 09:27:23
    不论我们使用哪种方式创建出来的组件组件中的template属性指向的模板内容中,必须有且... 在使用Vue.extend配合Vue.component定义全局组件时,Vue.extend里面定义template模板,而Vue.component里面是要注册一个...
  • 在使用vue时避免了子组件要调用父组件定义的方法,vue官网给出了API说明,this.$parent可以调用父组件自定义的方法。但是在使用UI组件时出现一个无法使用this.$parent直接调用父组件方法的问题。 <Tabs value...
  • vue props传递数组子组件获取不到

    万次阅读 2018-12-14 15:47:38
    1. 问题描述 在子组件定义了srcList props:{ width:Number, height:Number, name:String, size:String, srcList:Array, multiple:Boolean }...
  • 父子组件的通信一般使用props和emit来传值的。但是这种是单向的数据绑定。子组件接受父组件的传值,然后就把某个值传给父组件。参考:https://blog.csdn.net/qq_33769914/article/details/81012431 如何实现在父...
  • Manager组件: ``` import * as React from 'react' interface IProps { empty?: any } interface IState { test1?: string test2?: string } export default class Manager extends React....
  • 组件定义了personal这个值。在父组件接口中给这个值重新赋值。 子组件接受这个值,浏览器console能看到这个值,但是取不到属性的值。 以下原代码 1、home.vue(父组件)--personal是被传的参数 <!--子组件--...
  • 组件异步请求数据之后传值给子组件,子组件接收不到 贴上父组件代码图: 子组件代码图: 打印结果: 父组件异步请求数据回来在传到子组件,子组件无法接收,打印的依然是默认值。 这里有两种解决思路: 第一...
  • React 定义组件的参数对象

    万次阅读 2016-09-09 17:02:04
    使用React.createClass()方法创建组件时,需要传入一个参数对象,React会根据这个对象创建组件。这个参数对象中,除了包含必须要实现的render方法外,还有一些组件的设置属性。...组件定义
  • 在子组件中 this.customfunction = this.customfunction.bind(this); 即可
  • 我们在定义组件的时候,通常会给它传属性,比如作为FlatList,Listview的item或者要导入其他位置的时候,都需要给这个item组件传递值,有的时候,可能我们传值会的值没有定义,打个比方: <FlatList style={{...
  • 所谓组件:即分装起来的具有独立功能的UI部件,React希望我们能够将UI组件化,一个功能一个组件,最后通过组合或者嵌套的方式组成一个大的组件,完成UI搭建。 组件 <script src="../lib/react.js"></script>
  • VUE组件component注册后获取不到

    千次阅读 2018-09-30 00:00:36
    首先我注册一个组件 Vue.component("item-groceryText",{ template:"&lt;p&gt;这是一个组件&lt;/p&gt;" });...id定义不能有大写 Vue.component("it
  • Vant框架中输入框field组件绑定的value值不会同步更新data中定义的的变量上; 解决: 通过绑定对应的事件,并触发该事件来更新data中定义的变量值; <template> <view class="fill-wrap"> <...
  • React组件自定义属性的定义及使用

    万次阅读 2018-03-07 21:39:05
    React组件自定义属性的定义及使用 在很多情况下,react组件中,需要使用自定义的属性。也经常需要在默认事件(如,点击onClick)中使用自定义属性。举一个很简单的例子,点击一个按钮,并显示这个按钮“自定义属性...
  • 我们也都知道在Vue父子组件可以通过Props实现父组件传递组件。 在项目开发中,我们会遇到这种需求,页面初始化时,父组件通过接口拿需要数据,然后拿的数据通过props传递给子组件。在子组件会有些业务上的...
  • 在项目中,遇到vue父子组件的传参问题,父组件传参给子组件,子组件在created和mounted等生命周期中获取不到,也无法使用父组件传递过来的参数。 父组件传参,一般分为两种情况: 1、父组中的原始数据 (即定义在父...
  • 组件通过props传值给子组件,子组件在methods里要拿组件传递过来的数据有2种情况:第一种:父组件传递的参数是固定的,data里面定义的参数,这时候在子组件通过this.xxx就可以获取,但是要注意命名方式,...
  • ——-转载——– Vue.js 定义组件模板的七种方式 作者:大漠 日期:201...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 802,930
精华内容 321,172
关键字:

找不到为组件定义的