40.组件-为什么组件中自己私有的data要是function 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=adge">
    <title>Document</title>
    <script src="vue.js"></script>
</head>
<body>
    <div id="app">
        <mycom1></mycom1>
        <mycom1></mycom1>
    </div>
</body>
<script>
    var xx={count:0}
    Vue.component("mycom1",{
        template:"<div><input type='button' value='+1' @click='add'><h3>数据：{{count}}</h3></div>",
        data:function(){//在组件中，可以有自己的私有数据，但是，组件的data必须是一个function，并内部return一个数据对象
            //这里是自己的改造后的形式，这样会影响其他的组件：
            //return xx
            //下面的是官方推荐的形式，每个组件数据独立，不影响：
            return{
                count:0
            }
        },
        methods:{//定义组件的私有方法
            add(){
                this.count++
            }
        }
    })
    //创建Vue实例，得到ViewModel
    var vm=new Vue({
        el:"#app",
        data:{},
        methods:{}
    });
</script>
</html>

 

posted @ 2021-03-15 19:27  种太阳  阅读(13)  评论(0)    收藏  举报