Vue.js. Do not modify the props directly in the subcomponents. However, when I was writing, I found that the following modification is normal and can be run
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<script src="https://cdn.bootcss.com/vue/2.5.16/vue.js"></script>
</head>
<body>
<template id="demo">
<div>
<ul>
<li v-for="item in info.list">{{ item }}</li>
</ul>
<button @click="addItem">AddItem</button>
</div>
</template>
<div id="app">
<v-demo :info="info"></v-demo>
</div>
<script type="text/javascript">
Vue.component("v-demo", {
template: "-sharpdemo",
props: ["info"],
methods: {
addItem: function () {
this.info.list.push(1);
// this.info = {
// "list": [1,2,3,4,5,6]
// };
}
}
})
var vn = new Vue({
el: "-sharpapp",
data: {
"info": {
"list": [1,2,3]
}
}
})
</script>
</body>
</html> when I directly this.info =? When , Vue warns not to modify the value of props directly. However, the way I push above can be regarded as changing the value of props, right? Is this good practice?