vue2.0 父组件像子组件传值

Question

父组件

<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"

Answer 1

简要的意思是你不应该在父组件给默认值，应该在子组件赋默认值。

props:{
  num:{
   type:number,
   default:10
  }
}

而且你父组件，计算值时 要 :num="10"
出现这种问题，你应该没仔细看官方文档吧，亲。