ホームページ  >  記事  >  ウェブフロントエンド  >  uniappコンポーネントの作成方法

uniappコンポーネントの作成方法

coldplay.xixi
coldplay.xixiオリジナル
2020-12-08 13:59:054455ブラウズ

uniapp コンポーネントの作成方法: まず新しいコンポーネント [.vue] ファイルを作成し、次にコンポーネント ドキュメント構造を作成します。コードは [21c97d3a051048b8e55e3c8f199a54b23f1c4e4b6b16bbbd69b2ee476dc4f83aexport default {name: "コンポーネント名",props : {属性名: {type:String]。

uniappコンポーネントの作成方法

このチュートリアルの動作環境: Windows7 システム、uni-app2.5.1 バージョン、Dell G3 コンピューター。

推奨 (無料):uni-app 開発チュートリアル

uniapp コンポーネントを作成する方法:

カスタム コンポーネントの作成

1. 新しいコンポーネントを作成します .vueFile

2.コンポーネント ドキュメント構造

<template name="组件名称">
<view>
    ......
</view>
</template>
<script>
export default {
name: "组件名称",
//属性
props: {
属性名称: {
type: String,//属性类型
value: "值"
},
......
},
//组件生命周期
created:function(e){
},
methods: {
函数名称:function(obj){
},
}
}
</script>
<style>
组件样式
</style>

コンポーネントの使用

1、引用组件
import 组件名称 from "../../components/组件名.vue";
2、注册组件
export default{
components:{
组件名称
},
}
3、在试图模板中使用组件
<组件名称 组件属性="对应的值"></组件名称>

関連する無料学習の推奨事項:プログラミング ビデオ

以上がuniappコンポーネントの作成方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。