微信小程序组件的使用

小程序支持简洁的组件化编程。所有自定义组件相关特性都需要基础库版本 1.6.3 或更高。

开发者可以将页面内的功能模块抽象成自定义组件，以便在不同的页面中重复使用；也可以将复杂的页面拆分成多个低耦合的模块，有助于代码维护。自定义组件在使用时与基础组件非常相似。

直入主题：

1.组件的使用

右键新建component

创建一个组件。

然后在需要引用的“主页面”的xxx.json中 引用

"item":"/components/item/index"

 通过 item (自己定义的名字)  在引用页面使用组件

<item></item>

如图

 在使用组件的页面  每放一个 item  都会生成一个模块

2.组件中的插槽

        默认插槽

在组件中使用  <slot></slot>

 在主页面使用任意标签   <view>我是主页面<view>

 这样有点抽象。如图：

除了默认插槽还有具名插槽， 

 首先在 组件的js文件中开启 多个插槽

options:{
multipleSlots:true,//开启多个插槽
},

 在主页面 传入

<text slot="pre">$</text>
<text slot="next">美元</text>

在 组件中 接受

 <slot name="pre'"> </slot>
<slot name="next"> </slot>

 需要知道的一点是

                组件的样式默认是相互隔离

这个是定义在 

  options: {}  中

    styleIsolation: "isolated"     //不设置 默认就是 isolated

    //隔离isolated  //apply-shared 子可以用父  shared相互影响

这里就不一一演示了。 

 3.组件的生命周期  lifetimes

  lifetimes: {
    created() { console.log("创建完毕"); },
    attached() { console.log("挂在，可以设置data"); },
    ready() { console.log("组件挂在完毕"); },
    moved() { console.log("组件移动"); },
    detached() { console.log("组件已经卸载"); },
    error() { console.log("组件发生错误"); }
  },

4.页面生命周期  pageLifetimes

  pageLifetimes: {
    show() { console.log("页面显示"); },
    hide() { console.log("页面隐藏"); },
    resize() { console.log("页面变化"); },
  },

5.第三方组件

npm使用
    1.在项目中npm init -y创建package.json
    2.详情，本地设置，使用npm模块
    3.工具，构建npm

比如：vant 组件 

可以参考官方文档进行使用

组件的使用大概就是这些，感谢观看！