vue中不建议直接操作props,应该怎么操作？

Question

<template>

  <div class="ticket-content">

    <div class="ticket-content-left">

      <h1>{{title}}</h1>

      <h3>{{limit}}</h3>

      <h3 style="color: #999;">{{condition}}</h3>

    </div>

    <div class="ticket-content-right" :class="{available : available}" @click="getTicket">

      <span>{{available ? "立即领取":"已领取"}}</span>

      <div class="ticket-content-right-border" :class="{borderAvailable : available}"></div>

    </div>

  </div>

</template>

<script>

    export default {

      props:{

        title:String,

        limit:String,

        condition:String,

        available:Boolean

      },

      data(){

        return {

        }

      },

      methods: {

        getTicket(){

          this.available = false;

        }

      }

    }

</script>

如果我想操作available的值，应该怎么做？

Answer 1

mounted里给data赋props的值，操作data，如果要改变父组件props的值，用emit或者直接用vuex，啥都解决了