vuejsvuejs子组件直接修改数组问题

you have been blocked用户对问题“Vuejs使用Axios多次显示组件怎么办?”的回答 - 问答 - 云+社区 - 腾讯云云+社区首页我有2个组件。第一个组件是动态的,第二个组件只是获取用户地理位置。然后,地理定位将显示在第一个组件中。我的问题是我在页面上显示第一个组件几次,每次显示它都会产生一个低效的GET请求。如果我显示组件3次,它将发出3个GET请求。重写这个的最佳方法是什么?第1部分:
&template&
&section id=&under-info&&
THe user is from &ip_info&&/ip_info&
&/section&
&/template&
export default {
第2部分:&template&
&span id=&user-city&&
&/template&
export default {
mounted: function () {
this.$nextTick(function () {
this.getIpInfo(this.param)
props:['param'],
data: function () {
value:null
getIpInfo(){
var vm = this
delete axios.defaults.headers.common[&X-Requested-With&];
delete axios.defaults.headers.common[&X-CSRF-TOKEN&];
.get('http://api.ipstack.com/check?access_key=?',{
timeout: 1000
.then(function(response) {
vm.value = response.data['city]
写回答邀请回答 天前 07:36:26Vuejs使用Axios多次显示组件怎么办?写回答 天前 17:05:02将要在组件中重用此值3x的代码包装起来。&template&
The user is from {{location}}, and {{location}} is a great place.
They have a baseball team in {{location}}
&/template&
export default {
mounted: function () {
this.$nextTick(function () {
if(this.needLocation){
this.getIpInfo(this.param)
props:['param', 'needLocation'],
data: function () {
location:null
getIpInfo(){
this.location = //results from your API call
&/script&热门问答用户画像的标签有以下几个维度:
1、自然特征/基本属性
如性别、年龄、体形、地域、职业、教育程度等
2、消费特征/购买能力:如婚否、收入、车、房、孩子、购物类型、品牌偏好、信用水平、购买周期等
3、社会特征/行为特征:如婚姻状况、家庭构成、社交偏好、信息渠道等
4、兴趣特征/心理...... 如果想将腾讯云提供的Demo换成自己的服务器,可以做以下步骤。
1. 搭建 &webrtc-room& 的服务器
1.1 这个服务器能做什么?
点击demo里的互动课堂 &webrtc-room& 功能,您会看到一个房间列表,这个房间列表是怎么实现的呢?
在看到视频房间列表以后,...... 虚拟化技术是指计算元件在虚拟的基础上而不是真实的基础上运行,它可以扩大硬件的容量,简化软件的重新配置过程,减少软件虚拟机相关开销和支持更广泛的操作系统方面。通过虚拟化技术可实现软件应用与底层硬件相隔离,它包括将单个资源划分成多个虚拟资源的裂分模式,也包括将多个资源整合成一个虚拟资...... 可以安装PyFilter软件,它的目的是过滤掉服务器的所有非法登录请求。它的工作原理是读取防火墙日志文件,并在用户可配置的时间内检查请求是否来自同一IP地址。如果它捕获了太多失败的尝试,则会向防火墙添加规则,从而拒绝其连接到服务器。
下载和配置PyFilter
从Github克...... 1、对称加密算法
所谓对称,就是采用这种加密方法的双方使用方式用同样的密钥进行加密和解密。密钥是控制加密及解密过程的指令。算法是一组规则,规定如何进行加密和解密。
常用的算法有:DES、3DES、AES等。
全称为Data Encryption Standard,即...... 微软 CEO Nadella 其实在之前谈到了微软在过去几年中如何成为 GitHub 上最活跃的组织,提交了超过 200 万次的项目 commits 和 updates ,并表示微软正在全身心地投入开源。
但是这样也并不能让开发者重拾对微软的信心
因为 从始至终,微软对开源的嫉...... 扫描二维码扫描关注云+社区在 SegmentFault,学习技能、解决问题
每个月,我们帮助 1000 万的开发者解决各种各样的技术问题。并助力他们在技术能力、职业生涯、影响力上获得提升。
问题对人有帮助,内容完整,我也想知道答案
问题没有实际价值,缺少关键内容,没有改进余地
问个小问题
&template&
&div id="app"&
&img src="./assets/logo.png"&
&h1&{{ msg }}&/h1&
&h2&Essential Links&/h2&
&li&&a href="https://vuejs.org" target="_blank"&Core Docs&/a&&/li&
&li&&a href="https://forum.vuejs.org" target="_blank"&Forum&/a&&/li&
&li&&a href="https://gitter.im/vuejs/vue" target="_blank"&Gitter Chat&/a&&/li&
&li&&a href="https://twitter.com/vuejs" target="_blank"&Twitter&/a&&/li&
&h2&Ecosystem&/h2&
&li&&a href="http://router.vuejs.org/" target="_blank"&vue-router&/a&&/li&
&li&&a href="http://vuex.vuejs.org/" target="_blank"&vuex&/a&&/li&
&li&&a href="http://vue-loader.vuejs.org/" target="_blank"&vue-loader&/a&&/li&
&li&&a href="https://github.com/vuejs/awesome-vue" target="_blank"&awesome-vue&/a&&/li&
&firstcomponent&&/firstcomponent&
&secondcomponent&&/secondcomponent&
&/template&
import firstcomponent from './component/firstcomponent.vue'
import secondcomponent from './component/secondcomponent.vue'
export default {
name: 'app',
msg: 'Welcome to Your Vue.js App'
component: {
firstcomponent,
secondcomponent
firstcomponent,secondcomponent 都不能加载是哪里错了?求指点
答案对人有帮助,有参考价值
答案没帮助,是错误的答案,答非所问
报什么错么? 不应该是components吗
components:{
firstcomponent,
secondcomponent
分享到微博?
关闭理由:
删除理由:
忽略理由:
推广(招聘、广告、SEO 等)方面的内容
与已有问题重复(请编辑该提问指向已有相同问题)
答非所问,不符合答题要求
宜作评论而非答案
带有人身攻击、辱骂、仇恨等违反条款的内容
无法获得确切结果的问题
非开发直接相关的问题
非技术提问的讨论型问题
其他原因(请补充说明)
我要该,理由是:
在 SegmentFault,学习技能、解决问题
每个月,我们帮助 1000 万的开发者解决各种各样的技术问题。并助力他们在技术能力、职业生涯、影响力上获得提升。404 Not Found
The requested URL /q/8329/a-8762 was not found on this server.vuejs父子组件通信的问题 | WEB开发
vuejs父子组件通信的问题
父子组件之间可以通过props进行通信:
组件的定义:
1.创建component类:
var Profile = Vue.extend({
template: "&div&Lily&/div&";
&2.注册一个tagnme:
Vue.component("me-profile",Profile);//全局注册
局部注册:
var vm = new Vue({
el: "#todo",
components: {
"my-profile": Profile
模板注意事项:
&因为 Vue 就是原生的DOM,所以有些自定义标签可能不符合DOM标准,比如想在 table 中自定义一个 tr,如果直接插入 my-component 不符合规范,所以应该这样写:
&tr is="my-component"&&/tr&
在子组件中有一个this.$parent和this.$root可以用来方法父组件和跟实例。(但是不推荐)
Vue中子组件可以通过事件和父组件进行通信。向父组件发消息是通过this.$dispatch,而向子组件发送消息是通过this.$boardcast,这里都是向所有的父组件和子组件发送消息。
type: Array,
default: function() {
methods: {
add: function() {
this.$dispatch("add", this.input); //这里就是向父组件发送消息
this.input = "";
add: function(input) {
if(!input)
this.list.unshift({
title: input,
done: false
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持源码天空。}

我要回帖

更多关于 vuejs子组件直接修改数组 的文章

更多推荐

版权声明:文章内容来源于网络,版权归原作者所有,如有侵权请点击这里与我们联系,我们将及时删除。

点击添加站长微信