<!DOCTYPE html><html lang="zh"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script> <title>Vue自学：为什么组件data必须是个函数</title></head><body> <div id="app"> <cpn></cpn> <cpn></cpn> <cpn></cpn> </div></body><!-- 所使用的template模板标签内，必须再嵌套一层div,否则会显示不全 --><template id="cpn"> <div> <h1>当前计数值为:{{message}}</h1> <button type="button" v-on:click="add">+</button> <button type="button" v-on:click="reduce">-</button> </div></template><script type="text/javascript"> //子组件 Vue.component('cpn',{ template:'#cpn', //data必须是个函数，原因是函数在复用时可以做到唯一性 //当data不是一个函数的时候，组件标签在复用的时候，会使得数据重复错乱 data(){ return { message:0, } }, methods:{ add(){ this.message++ }, reduce(){ this.message-- } } }) //父组件 const app = new Vue({ el:'#app', data:{ }, methods:{ } }) //为什么data需要是一个函数 //函数内部本身是一个独立的数据栈 // function test(x,y){ // let q = x; // let w = y; // console.log(q,w); // } // let obj1 = test(1,2) // let obj2 = test(3,4) // let obj3 = test(5,6) // console.log(obj1,obj2,obj3) //当函数内部引用的东西是外部常量时，当外部常量事先被更改后 //再次打印函数，整个变量的值都会被改变 const obj = { name:'wang xiao er', age:'18', } function abc(){ return obj } let obj1 = abc() let obj2 = abc() let obj3 = abc() obj1.name = 'koby' console.log(obj1,obj2,obj3)</script></html>
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
Collection
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
