关于自定义组件Component的使用问题
发布于 6 年前 作者 guping 11941 次浏览 来自 问答

1、对于组件页面需不需要在app.json中的pages 定义?

2、component.js 文件中需不需要定义 Page({})?

3、component.json 文件中声明了

               “component”: true

就表示该page就是自定义的组件?

由于才体验过程中一直有些许报错提示,所以想确定一下,希望官方能分享一下;

10 回复

usingComponents里面不要加扩展名:

{
  "usingComponents": {
    "test-tag-name": "../test2/test2"
  }
}

上例中,在wxml里面用的时候,写成:

<test-tag-name inner-text="xxx"> ... </test-tag-name>

注意观察上面的命名关系。

1、在properties中定义组件属性,例如image的src属性;

2、在data中定义组件中的数据,例如你上面组件中要显示的文字

data: { innerText: “这里是插入到组件slot中的内容 xxxxxxx”},在wxml中通过{{innerText}}拿到这个数据;而且这个数据是组件内部使用的数据;

意思是把组件也列在pages列表中吗?是可以的这样做的,这样的话,这组文件既是自定义组件又是page。

嗯嗯,这样的话职责就不单一了,而且整个页面都是组件了吧?

你好,问题解决了,标签名其实写的都没问题,路径我也改成了没有后缀的形式,起初还是不行,后来新建了一个新的项目从来来过又可以啦。

原因:无关写法,基础库版本要设置在 1.6.4 版本以上才行(之前是 1.6.0,这个就尴尬了…)。

设置方式:开发工具右上角 > 详情  >  项目设置 > 基础库版本。

你好,“该page就是自定义的组件”,这样的理解是不正确的。自定义组件不是Page,是独立的的一组 js/wxml/wxss/json 文件,所以它不需要在pages列表中定义,也不需要调用Page({})。

嗯嗯,同样都有生命周期,但还没深入了解,怎么用还是要看需求吧;不过这个功能和H5页面来得很及时,正好能用,66666

对。换句话说就是 Component() 也可以用来定义页面(如果你觉得这个构造器比 Page() 好用的话)。

按照官方文档自定义组件使用了一下,结果并没有显示。

  1. 在 pages/test2/test2.wxml 中定义组件的,这一步应该不会出错;

  2. 在pages/test/test.wxml 中使用上面定义的组件,文档中说需要在 json 文件中进行配置:


    疑问一:这个地方组件名称是随便取的还是什么,我这里随便取的 test2;

    疑问二:还有后面的路径,是指向 wxml 文件还是指向其它文件还是直接 '../test' 到组件目录就行,我这里指向 wxml 文件的。

{
  "usingComponents": {
    "test": "../test2/test2.wxml"
  }
}

    3. 我在 text.wxml 中是这样写的:

<view>
  <!-- 以下是对一个自定义组件的引用 -->
  <test innerText="Some text xxxxxxx">
    <view>这里是插入到组件slot中的内容 xxxxxxx</view>
  </test>  
</view>

    结果 innerText 那个属性并没有显示出来,

    @新新新丶    @LastLeaf    能不能帮忙看下是哪里写错了还是什么?

好的,我想是因为我直接通过编译模式去调试这个组件所以出现了这个问题,而且我也尝试了一下,以上的方式也能做成组件,这是正常的吗?组件也能正常使用

回到顶部