当 vue 遇上小程序（3）

最新推荐文章于 2023-06-09 15:47:19 发布

清晏23

最新推荐文章于 2023-06-09 15:47:19 发布

阅读量252

点赞数

分类专栏：小程序文章标签： Vue.js 小程序

本文链接：https://blog.csdn.net/sinat_36539161/article/details/82054248

版权

小程序专栏收录该内容

7 篇文章 0 订阅

订阅专栏

接上一篇 [当 vue 遇上小程序（1）]

1.5、嵌套循环

· Vue.js

<!-- App.vue -->
<template>
  <div id="app">    
     <div v-for="item in address">
        <p>{{item.province}}</p>
        <div>
            <span v-for="grandItem in item.cities">{{grandItem}}</span>
        </div>
    </div> 
  </div>
</template>
<script>
    export default {        
        data(){
            return{
                address: [
                  { province: "湖南", cities:["长沙", "株洲", "湘潭", "岳阳","衡阳"]},
                  { province: "广东", cities: ["广州", "深圳", "佛山", "珠海", "中山"]},
                  { province: "广西", cities: ["南宁", "柳州", "桂林", "玉林","北海"]}
                ]
            }
        }
    }
</script>

· 小程序

<!--A.wxml-->
<view>
   <view wx:for="{{address}}" wx:key="index">
        <text>{{item.province}}</text>
    	<view>
      		<text wx:for="{{item.cities}}" wx:for-item="grandItem" wx:key="index">{{grandItem}}</text>
    	</view>
  </view>
</view>
 
<!--A.js-->
Page({  
  data: {     
    address: [
      { province: "湖南", cities:["长沙", "株洲", "湘潭", "岳阳","衡阳"]},
      { province: "广东", cities: ["广州", "深圳", "佛山", "珠海", "中山"]},
      { province: "广西", cities: ["南宁", "柳州", "桂林", "玉林","北海"]}
    ]
  }
})

第二层也可以用 item 取值，但内外都是 item ，不利于使用和维护。

<text wx:for="{{item.cities}}" wx:key="index">{{item}}</text>

1.6、公用模板

其实公用模板，本身是单独的页面，在这里主要通过父页面传递参数，实现同页不同面！

1）、在 App.vue 调用公共模块，传递一个或多个参数

除了 props ，传参还有 Vuex、emit、ref 等方法，具体可参考《vue 组件传值》。

<template>
  <div id="app">   
    <Head :hd="[title,hd,articles]"></Head>
    <Article :atc="articles"></Article>
 </div>
</template>
<script>
  import Head from './components/sub/head';
  import Article from './components/sub/article';
  export default {
    name: 'app',   
    components:{
     Head,Article
    },
    data(){
      return{
        title:"标题",
        hd:{name:"标题",desc:"简述"},
        articles:[
          { name: "以梦为马", desc: "不负韶华" },
          { name: "面朝大海", desc: "不负韶华" }
        ]
    }
  }
</script>

· Vue.js

1）、公用模板：head.vue

接收多个参数组成的数组值

<template>
	<div class="head">
		<div>{{hd[0]}}</div>    	
		<div>
			<div>{{hd[1].name}}</div>
			<p>{{hd[1].desc}}</p>
		</div>    	
	</div>
</template>
<script>	
	export default{
		props:['hd']
	}
</script>

公用模板：article.vue

<template>
	<div class="article">
		<div v-for="(item,index) in atc" :key="index">
			<div>{{item.name}}</div>
			<div>{{item.desc}}</div>
		</div>  	
	</div>
</template>
<script>	
	export default{
		props:['atc']
	}
</script>

· 小程序

1）、在 index.wxml 调用，传递一个或多个参数

这里，is="head" ，也就是引用 name = "head" 的公用模板

<import src="../common/head.wxml" />
<import src="../common/article.wxml"/>
<view>
    <template is="head" data="{{title: '静态标题'}}"/>
    <template is="head" data="{{title}}"/> 
    <template is="head" data="{{hd,txt}}"/>
    <template is="{{articles.length>0?'article':'head'}}" data="{{articles}}"/>
</view>

index.js

Page({
  data: {    
    title:"标题",
    hd:{name:"标题",desc:"简述"},
    txt:"正文内容",
    articles:[
      { name: "以梦为马", desc: "不负韶华" },
      { name: "面朝大海", desc: "花开半夏" }
    ]
  }
})

2）、公用模板：head.wxml

<template name="head"> 
  <view class="page-head">
    <view class="page-head-title">{{title?title:hd.name}}</view>
    <view wx:if="{{hd}}" class="page-head-desc">{{hd.desc}}</view>
    <view wx:if="{{txt}}"">{{txt}}</view>
  </view>
</template>

公用模板：article.wxml

<template name="article">
    <view wx:for="{{articles}}" wx:key="index">
      <text>{{item.name}}</text>
      <view>{{item.desc}}</view>
    </view>  
</template>

*注意：给模块传递多个参数时，两者写法略有不同

Vue.js

 <Head :hd="[title,hd,articles]"></Head>

小程序

<template is="head" data="{{hd,cloud}}"/>

未完。。。

清晏23

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

当 vue 遇上 小程序 （3）

1.5、嵌套循环

1.6、公用模板

当 vue 遇上小程序（3）