vue2.0 父組件像子組件傳值

父組件

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
  <conter num="10"></conter>
  </div>
</template>
<script>
import conter from "./conter";
export default {
  name: "HelloWorld",
  data() {
    return {
      msg: "Welcome to Your Vue.js App，test it111"
    };
  },
  components: {
    conter
  }
};
</script>

子組件

<template>
  <div>
      <button @click="add">+</button>
      <button @click="del">-</button>
      <p>{{num}}</p>
  </div>
</template>

<script>
export default {
props:["num"],
  data () {
    return {
       
    };
  },
  methods: {
      add(){
          this.num++
      },
      del(){
          this.num--
      }
  }
}

</script>

點擊子組件的按鈕時報錯：

[Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: "num"