Uni-app pages encapsulate components and reference them to pages

I believe everyone in the development of the project module will be similar to a separate component, such as head search, list… Etc., and then can be arbitrarily introduced in the required page. This simplifies the code and makes it easier to maintain. Today we’ll take a look at how simple it is to create components and reference them to pages in uni-app.

The components folder is where the common components are stored, as discussed in the previous article. We can create our own files here. Let’s take the list as an example. Let’s take a look at the renderings:

Create a list file in the Components file as shown below:

After creating the list.vue file, you can then write the layout as required. Let’s look at the code (I won’t paste the styles) :

	<view class="fallList">
		<navigator class="fallBlock" v-for="(item , index) in fallList" :key="index" :url="`/pages/common/${item.fallUrl}`" id="item.id">
			<image :src="item.fallImg" :mode="item.mode" class="fallImg">
			<view class="mark">{{item.mark}}</view>
			<view class="fallTitle">{{item.fallTitle}}</view>
			<view class="fallFooter">
				 <view class="fallPortrait">
					<image :src="item.fallPortrait" :mode="item.modes">
					<text>{{item.fallName}}</text>
				 </view>
				 <view class="iconfont iconlike" :class="item.like"><text>{{item.likeViews}}</text></view>
				 <view class="iconfont iconSee" :class="item.see"><text>{{item.seeViews}}</text></view>
				 <view class="iconfont iconComment" :class="item.comment"><text>{{item.commentViews}}</text></view>
			</view>
		</navigator>
	</view> 
</template>
Copy the code

	export default{
		name:"listBox",
		props:{
				fallList:{
					fallUrl:{
						type: String,
						default: ''
					},
					fallImg:{
						type: String,
						default: ''
					},
					mode:{
						type: String,
						default: ''
					},
					mark:{
						type: String,
						default: ''
					},
					fallTitle:{
						type: String,
						default: ''
					},
					fallPortrait:{
						type: String,
						default: ''
					},
					modes:{
						type: String,
						default: ''
					},
					fallName:{
						type: String,
						default: ''
					},
					see:{
						type: String,
						default: ''
					},
					seeViews:{
						type: String,
						default: ''
					},
					comment:{
						type: String,
						default: ''
					},
					commentViews:{
						type: String,
						default: ''
					},
					like:{
						type: String,
						default: ''
					},
					likeViews:{
						type: String,
						default: ''
					}
				}
			},
		data(){
			return{
			}
		},
		methods:{
			
		}
	}
</script>
Copy the code

From the above code, we can see that in js our data is stored in props. This completes the code in our component. Next we will introduce this component into the page.

<listBox :fallList="fallList"></listBox> </view> <script> import listBox from '@ / components/fallList/list. Vue' / / here is the path of introducing component in the page of writing export default {components: {listBox / / here is name of the name of the component, }, data() {return {fallList:[]// this is where the list component gets the data}}, onLoad() {this.placedata (); }, methods: {placeData () {/ / data access interface uni. Request ({url: 'https://www.fastmock.site/mock/ interface id/list/API/mineList', method: 'POST', dataType: 'JSON', data:{ text:'uni.request' }, header: { 'content-type': 'application/x-www-form-urlencoded' }, success: (res) => { console.log(res.data); 038354 this.fallList = eval(res.data); }}); } } } </script>Copy the code

This is a brief overview of how uni-App creates components and introduces them to pages. Well today wrote this, there is insufficient place welcome to comment.