8.【nuxt起步】-vue组件之间数据交互
2024-08-27 17:19:46
那么现在问题来了,我现在是在index.vue获取了服务端的数据,怎么传值到maincontent.vue?当然你也可以把获取数据放在maincontent.vue,但假如有些数据同时在header,footer,maincontent.vue被引用,如果每个compnent都去请求,就太费性能了。这时候需要用到vue的组件之间传值的特性。先从简单的,index.vue 传值到 maincontent.vue。
1.Index.vue修改如下:
2.MainContent.vue修改如下:
<template>
<div class="mainContent">
<div class="title-view">
<h4>{{tdInfo.title}}</h4>
</div>
<div class="data-view clearfix" style="border-bottom: 0.01rem solid #ebeaea;">
<div class="middle-data">
<p class="price">{{tdInfo.price}}</p><span>租金</span>
</div>
<div class="middle-data">
<p class="price">{{tdInfo.type}}</p><span>房型</span>
</div>
<div class="right-data">
<p class="square">{{tdInfo.square}}}<sup>2</sup></p><span>面积</span>
</div>
</div>
<div class="section keyword-section">
<p>
<span class="infoCard keyWord">床</span>
<span class="infoCard keyWord">可做饭</span>
<span class="infoCard keyWord">独立卫生间</span>
<span class="infoCard keyWord">随时看房</span>
</p>
</div>
<div class="section">
<div class="title">
<h5 style="display:inline-block;margin:0;font-weight: bold;font-size: 1.2rem">打电话时说是在<b style="color:red;">XXXX</b>看到的~</h5>
</div>
</div>
<div class="section">
<div class="title">出租房基本信息</div>
<div class="info-content">
<p><span>单价:</span>{{tdInfo.danjia}}元/m<sup>2</sup></p>
<p><span>小区:</span>{{tdInfo.xiaoqu}}</p>
<p><span>楼层:</span>{{tdInfo.floor}}</p>
<p><span>房屋类型:</span>{{tdInfo.fwtype}}</p>
<p><span>朝向:</span>{{tdInfo.toward}}</p>
<p><span>装修:</span>{{tdInfo.decor}}</p>
<p><span>押金:</span>{{tdInfo.deposit}}</p>
<p><span>联系人:</span>{{tdInfo.linkman}}</p>
<p><span>区域:</span>{{tdInfo.area}}</p>
<p><span>房源ID:</span>{{tdInfo.fid}}</p>
</div>
</div>
<div class="section">
<div class="title">小区信息</div>
<div class="info-content">
<p><span>房源小区:</span>{{tdInfo.xiaoqu}}</p>
<p><span>小区地址:</span>{{tdInfo.address}}</p>
</div>
</div>
<div class="section">
<div class="title">出租房描述</div>
<div class="info-content" style="text-align:left;padding:1rem;">{{tdInfo.desc}} </div>
</div>
<div class="agent-view">
<dl>
<dt class="agent-head">
<img src="{{tdInfo.headimg}}" alt="">
</dt>
<dd class="agent-detail">
<h4 style="font-size: 1.5rem;font-weight: normal;">{{tdInfo.faburen}} </h4>
<p>个人发布者</p>
</dd>
<dd class="more-indicator" style="display: none;"><span class="detail-indicator iconfont icon-iconfontxiangxia1copy19"></span>
</dd>
</dl>
</div>
<div class="section">
<p style="text-align: center;margin-top: 10px;font-family: bold;color: #18c9ac;padding: 5px;line-height: 2rem;">关注我们获取更多房源</p>
<div style="text-align: center;padding: 5px;">
<img src="https://www.vyuan8.com/vyuan_fangchan/public/uploads/10079/20180618/7e28ebffe1430cb566ac8a4212031aa5.jpg" alt="" style="max-width: 100%;max-height:240px;">
</div>
</div>
</div>
</template>
<script>
export default {
props:["tdInfo"],
data(){
return{}
}
}
</script>
刷新发现报错了
这里是vue的属性用错了
改成这样
<dt class="agent-head">
<img :src=tdInfo.headimg alt="">
</dt>
3.顺便熟悉下v-for
<span class="infoCard keyWord" v-for="(item,index) in tdInfo.keyWord" :key="index">{{item.word}}</span>
4.刷新就可以出现效果,这里只是用到单向的数据传值,还没有交互,假如我在maincontent.vue对tdInfo进行了修改,index.vue或者footer.vue的数据怎么联动?
可以直接先尝试修改,看能不能共享数据。结果是不行的,这时候要用到vue的store特性
5.先在根目录新建store文件夹,新建index.js,编码如下
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const store = () => new Vuex.Store({
state: {
tdInfo:{}
},
mutations: {
newTdInfo(state, result) {
state.tdInfo = result
}
}
})
export default store
先在maincontent加个click按钮
运行报错state未定义,重新npm run dev下
点击有效果:
6.但是footer的号码显示没有变化,给footer增加一个watch
刷新效果如下:
最新文章
- angularjs里对JS的lowercase和uppercase的完善
- centos 7 mini装maridb 10.1 binary版本
- Java_类文件及加载机制
- crud springmvc
- 如何在windows server 2008的桌面上显示 我的电脑
- 《A First Course in Probability》-chaper5-连续型随机变量-均匀随机变量
- 【转】Win7+Ubuntu12.04.1硬盘安装错误及解决方案----不错
- linux服务器安全小知识
- 笔试题:金额转换,阿拉伯数字的金额转换成中国传统的形式如:(¥1011)->;(一千零一拾一元整)输出
- c# mvc如何生成excel
- #云栖大会# 移动安全专场——APP加固新方向(演讲速记)
- python 元组(tuple)的使用方法介绍
- Linux挖矿病毒 khugepageds详细解决步骤
- SpringBoot启动如何加载application.yml配置文件
- 【基础】链表的储存结构说明(python)
- 生成命令行接口--google开源的fire使用体验【python-fire】
- 【Linux】top命令
- 使用Numpy实现卷积神经网络(CNN)
- while 解决 10000米绳子 对折当 绳长小于5米时求绳的对折次数
- Android中级教程之----Log图文详解(Log.v,Log.d,Log.i,Log.w,Log.e)
热门文章
- dubbo doc入门文档
- python算法-汉诺塔问题
- redis安装、配置和启动
- client三大家族区别(三大家族总结)
- 树状数组--前n项和;
- Coloring Torus(Atcoder Grand Contest 030 C)
- Java面试题之红黑树原理
- springboot中如果使用了@Autowired注入了bean,则这个类也要为spring bean,new出来注入的bean为null
- cf 472G Design Tutorial: Increase the Constraints 分块+压位/FFT
- 相关分析 BZOJ 4821