我百度了很多的解决问题的帖子,都是直接贴出来英文的,翻译一下会死啊,真的是,很多的问题我们都不是说不知道怎么解决,其实是我们压根没看懂描述的是什么意思,就像这个,看明白描述基本就知道怎么修改了。我们在接收一个值之前需要使用一个当前页面下面的data里面定义的变量接收,这样可以避免直接更改这个值。 我们写个例子:
<template>
<div class="back" v-on:click="back">
<img src=".././common/imgs/fanhui.png" alt="">
<span>返回</span><span>{{'剩余'+overwrite_seconds_timeout+'秒'}}</span>
</div>
</template>
<script>
export default {
name: "return",
data() {
return {
time: '',
overwrite_seconds_timeout: this.seconds_timeout
}
},
props: {
seconds_timeout: 0
},
/**
* @created 页面加载的时候进行页面自减函数的间隔执行操作
*/
created: function () {
let that = this;
that.time = setInterval(that.remain_sec, 1000)
},
methods: {
/**
* @remain_sec 进行秒数自减的操作
*/
remain_sec() {
let that = this;
if (that.overwrite_seconds_timeout === 1) {
that.$router.push({path: '/'});
} else {
that.overwrite_seconds_timeout--;
}
},
/**
* 这里是返回,直接调用自定义组件的返回,自定义逻辑
*/
back() {
if (this.back) {
this.$emit("comBack")
}
}
},
/**
* @beforeDestroy 页面销毁前,将Interval清除
*/
destroyed: function () {
let that = this;
clearInterval(that.time);
}
}
</script>
<style lang="less" scoped>
.back {
float: left;
img {
width: 43px;
height: 34px;
margin-left: 40px;
float: left;
}
span {
height: 25px;
font-size: 26px;
font-family: PingFangSC-Regular;
font-weight: 400;
color: rgba(255, 255, 255, 1);
line-height: 40px;
float: left;
margin-left: 8px;
}
}
这是一个组件,倒计时就返回的组件,常用的场景是一个页面进来以后我们提示用户还有多少秒就会返回上一个界面,很常见的一个组件,那么这里就有一个需要接收父组件的值seconds_timeout,这个值我们在页面是怎么使用的呢?
//将返回的组件引入
import back from "./components/back"
Vue.component("back-view",back)
<back-view @comBack="comBack()" :seconds_timeout="120"></back-view>
我们引用的时候直接将需要的值给,也就是120秒以后会返回,那么这个时候我们如果直接在组件中接收seconds_timeout,会直接警告,就是我们今天的问题,怎么解决呢?上面的例子在data里面定义了一个新的值就是为了解决这个问题。
/**
* 这里是返回,直接调用自定义组件的返回,自定义逻辑
*/
back() {
if (this.back) {
this.$emit("comBack")
}
}
使用方式:
//这里写自己需要的一些处理逻辑
comBack() {
this.$router.go(-1);
}
到这里一个组件的基本使用就可以了,有些人会问为什么标题不写成组件的基本使用而是一个问题呢?其实我们自己在写代码的时候会发现很多时候我们学习一个东西不是因为我们想学习,而是我们遇到了一个问题,不好解决的时候,我们会找到一些解决的方案,这个解决的问题的过程其实就是一种学习的过程,所以我习惯性的根据一个问题来引申出来一些存在的知识点,这样做的好处是第一我们可以直接看到活生生的例子,第二是我们可以直接看到解决的思路,对我们解决的别的问题其实也是很有帮助的,最后就是一般有例子的时候才更有说服力,不然空谈一些什么东西是没有任何意义的。喜欢的可以关注一下,一起交流学习进步。