39.组件-组件中自己的data和methods

<!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>
    </div>
</body>
<script>
    Vue.component("mycom1",{
        template:"<h3 @click='show'>组件中自己的:{{msg}}</h3>",
        data:function(){//在组件中,可以有自己的私有数据,但是,组件的data必须是一个function,并内部return一个数据对象
            return{
                msg:"data数据"
            }
        },
        methods:{//定义组件的私有方法
            show(){
                console.log("触发了组件私有show方法")
            }
        }
    })
    //创建Vue实例,得到ViewModel
    var vm=new Vue({
        el:"#app",
        data:{},
        methods:{}
    });
</script>
</html>

 

posted @ 2021-03-15 19:25  种太阳  阅读(6)  评论(0编辑  收藏  举报