注意:
1.组件中的data属性的内容,必须是一个function类型,并且必须要有返回值。用法跟实例中的data使用是一样的,同时也有实例化对象的其他属性如,methods
2.因为如果,不是这里面的对象,而是一个公共的对象实例,可能会出现错误。不同的组件如果改变了公共的对象然后返回,对其他组件有影响
HTML代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../lib/vue.js"></script>
</head>
<body>
<div id="app">
<my-com></my-com>
</div>
<script>
Vue.component('myCom',{
template:'<h3>陈小帅是真的帅呢 +++ {{ msg }}</h3>',
data:function () {
return{
msg:'组件中的data内容'
}
}
});
//组件中的data属性的内容,必须是一个function类型,并且必须要有返回值。用法跟实例中的data使用是一样的,同时也有实例化对象的其他属性如,methods
//因为如果,不是这里面的对象,而是一个公共的对象实例,可能会出现错误。不同的组件如果改变了公共的对象然后返回,对其他组件有影响
var vm = new Vue({
el:'#app',
data:{}
});
</script>
</body>
</html>
效果: