实战内容：创建微信小程序动态组件并在其他页面中引用该组件
欢迎关注收藏订阅专栏！！！
提示：该项目只用于个人实战，不应用于任何商业用途。
一、今日实战目标
- 创建动态组件
- 局部引用组件
- 全局引用组件
二、实战步骤
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文章来源：https://www.toymoban.com/news/detail-485297.html
3. 全局引用组件
- 修改
app.json文件
// app.json 文件中，引入组件
{
"usingComponents": {
"test": "/components/test/test"
}
}
- 在页面中使用
// 在页面的 .wxml 文件中，使用组件
<test> </test>
//或者 传递name属性
<test name="888"></test>
三、注意事项
在实际开发中，我们需要根据组件的使用频率和范围，来选择合适的引用方式，达到项目优化的效果文章来源地址https://www.toymoban.com/news/detail-485297.html
- 当某组件在多个页面中常用到的时候，则
全局引用 - 某组件只在特定的页面中用到，则
局部引用
到了这里，关于【微信小程序】创建动态组件和引用的方法的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
