【微信小程序】创建动态组件和引用的方法

实战内容：创建微信小程序动态组件并在其他页面中引用该组件

欢迎关注收藏订阅专栏！！！

---

提示：该项目只用于个人实战，不应用于任何商业用途。

一、今日实战目标

• 创建动态组件
• 局部引用组件
• 全局引用组件

---

二、实战步骤

1.创建动态组件

• 我是先选择官方的基础模板进行创建一个微信小程序，
  
• 在项目创建成功后，在项目的根目录，新建components文件夹，然后再新建名为test的组件，目录结构如下图
  
• 接下来就是编写test组件的内容

// 示例代码,只改动.js和.wxml文件内容 （可以参考下）

// components/test/test.js
Component({
  /**
   * 组件的属性列表
   */
  properties: {
    name:{
      value: "null",
      type: String //此处设置数据类型 这样 组件就能接收到数据
    }    
  },

  /**
   * 组件的初始数据
   */
  data: {

  },

  /**
   * 组件的方法列表
   */
  methods: {

  }
})

// components/test/test.wxml
<text>这是组件:{{name}}</text>

到这里,一个简单的组件就已经完成了，下一步进行组件引用的讲解

2. 局部引用组件

• 第一步，在需要用到这个组件的.json文件内添加下方代码

// 仅为示例代码，在实际开发中根据实际情况调整名称和地址
{
  "usingComponents": {
    "test": "/components/test/test"
  }
}

• 第二步，在.wxml文件中，添加以下代码

// name则对于组件中接收的属性数据，记得不要打错

<test name="888"></test>

• 我们就可以看到以下的效果
  

红框内就是我们的组件，如果不添加name动态属性，则显示默认值null

3. 全局引用组件

• 修改app.json 文件

// app.json 文件中，引入组件

{
  "usingComponents": {
    "test": "/components/test/test"
  }
}

• 在页面中使用

// 在页面的 .wxml 文件中，使用组件

<test> </test> 
//或者 传递name属性
<test name="888"></test>

---

三、注意事项

在实际开发中，我们需要根据组件的使用频率和范围，来选择合适的引用方式，达到项目优化的效果

• 当某组件在多个页面中常用到的时候，则全局引用
• 某组件只在特定的页面中用到，则局部引用