zoukankan      html  css  js  c++  java
  • Vue中data返回对象和返回值的区别

    速记:粗浅的理解是,事件的结果是影响单个组件还是多个组件。因为大部分组件是要共享的,但他们的data是私有的,所以每个组件都要return一个新的data对象

    返回对象的时候

    <!DOCTYPE html>
    <html>
    <head>
    	<meta charset="utf-8">
    	<meta http-equiv="X-UA-Compatible" content="IE=edge">
    	<title></title>
    	<link rel="stylesheet" href="">
    	<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
    </head>
    <body>
    	<div id="components-demo3" class="demo">
    		<button-counter2></button-counter2>
    		<button-counter2></button-counter2>
    		<button-counter2></button-counter2>
    	</div>
    	<script>
    	Vue.component('button-counter2',{
    		data:function(){
    			return {
    				count:0
    			}
    		},
    		template:'<button v-on:click="count++">点击了{{count}}次</button>'
    	})
    	
    	new Vue({
    		el:'#components-demo3'
    	})
    	
    	</script>
    </body>
    </html>
    


    data直接返回值的时候

    <!DOCTYPE html>
    <html>
    <head>
    	<meta charset="utf-8">
    	<meta http-equiv="X-UA-Compatible" content="IE=edge">
    	<title></title>
    	<link rel="stylesheet" href="">
    	<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
    </head>
    <body>
    	<div id="components-demo3" class="demo">
    		<button-counter2></button-counter2>
    		<button-counter2></button-counter2>
    		<button-counter2></button-counter2>
    	</div>
    	<script>
    	buttonCounter2Data={
    		count:0
    	}
    	Vue.component('button-counter2',{
    		data:function(){
    			return buttonCounter2Data
    		},
    		template:'<button v-on:click="count++">点击了{{count}}次</button>'
    	})
    	
    	new Vue({
    		el:'#components-demo3'
    	})
    	
    	</script>
    </body>
    </html>
    

  • 相关阅读:
    Android之Activity启动过程
    Android之Application进阶
    Android之Context进阶
    Thread之ThreadLocal
    Android 系统服务与Binder应用服务
    Android Binder
    Android SystemServer
    Android系统服务与服务注册
    Android Binder进阶扁一
    小米商城-题头3
  • 原文地址:https://www.cnblogs.com/smart-girl/p/10521950.html
Copyright © 2011-2022 走看看