prop只读

在传值时不要对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>
​

 

3.prop值的另一种对象方式

 props: {
      init:{
          //如果外界使用count组件时，没有传递init属性，则默认值生效
          default:0,
          //init的值类型必须是NUmber数字型
          type:Number,
          //必填校验
          require:true
      }
  },