首先写一个组件,然后在要引用的地方引入它:
<script>
import pagesthreeList from '../../components/pagesthreeList.vue'
export default {
components: {
pagesthreeList
.....
开始使用组件:【page3img与page3text的值都是我们这边传过去的】
<pagesthreeList page3img='http:xxxx/img1.png' page3text='引入文字'>
</pagesthreeList>
pagesthreeList组件部分
<template>
<view class="pageimg">
//src中使用插值语法 page3img传过来是一个 路径地址字符串
<image :src="page3img" mode="aspectFit"></image>
</view>
//普通插值语法 直接花括号
<text>{{page3text}}</text>
</template>
<script>
export default {
//暴露一下,使别的地方可以用这个组件
name: "pagesthreeList",
// 接收传过来的page3text与page3img,定义为字符串类型
props: {
page3text: String,
page3img: String,
},
}
</script>
重点: <image :src="page3img" ></image>