在传值时不要对prop传的值进行修改。
1.定义一个组件页面About
在About页面插入了NQMM页面的占位符，在占位符中使用init传一个值，当这里的属性绑定了v-bind后这里值的类型是数字型，当不绑定v-bind时这里的init是字符型。
<template>
<div>
<h1>这里是About界面</h1>
<span> <NQMM :init="6"></NQMM></span>
</div>
</template>
<script>
export default {
data() {
return {};
},
activated() {},
watch: {},
created() {},
mounted() {},
methods: {},
};
</script>
<style scoped>
div {
}
</style>
?
定义一个组件页面NQMM
这里通过prop接受到传过来的init值，但页面不可以对init值进行直接的一个init++操作，因为init是一个只读属性，所以需要将init赋值给count属性，对count进行操作。
<template>
<div>
<h1>XJ定义的全局组件</h1>
<h5>Count++</h5>
<span>{{ count }}</span>
<button @click="add">+1</button>
<button @click="show">show</button>
</div>
</template>
<script>
export default {
props: ["init"],
data() {
return {
count: this.init,
};
},
activated() {},
watch: {},
created() {},
mounted() {},
methods: {
add() {
this.count++;
},
show(){
console.log(this);
}
},
};
</script>
<style>
</style>
?