组件数据的存放
将计数器封装为组件
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Untitled</title>
</head>
<body>
<div id="app">
<cpn></cpn>
</div>
<template id="ccc">
<div>
<h2>当前计数：{{counter}}</h2>
<button @click="increment">+</button>
<button @click="decrement">-</button>
</div>
</template>
<script src="../js/vue.js"></script>
<script>
Vue.compotent(‘ccc‘ ，{
template: ‘#cpn‘,
data() {
return{
counter: 0
}
},
methods: {
increment() {
this.counter++
},
decrement() {
this.counter--
}
}
}）
//root组件
const app = new Vue({
el: ‘#app‘ ,
})
</body>
</html>
组件是可复用的vue实例，一个组件被创建好之后，就可能被用在各个地方，而组件不管被复用了多少次，组件中的data数据都应该是相互隔离，互不影响的，基于这一理念，组件每复用一次，data数据就应该被复制一次，之后，当某一处复用的地方组件内data数据被改变时，其他复用地方组件的data数据不受影响。
父子组件的通信：
Vue实例和子组件的通信与父组件和子组件的通信过程是一样的
props用法：
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Untitled</title>
</head>
<body>
<div id="app">
<cpn :cmovies="movies" :cmessage="message"></cpn>
</div>
<template id="ccc">
<div>
<h2>{{cmovies}}</h2>
</div>
</template>
<script src="../js/vue.js"></script>
<script>
const cpn = {
template: ‘#cpn‘,
//数组写法：
//props: [‘cmovies‘, ‘cmessage‘],
//对象写法：
props: {
//类型限制：
//cmovies: Array ,
//cmessage: String，
//设置默认值：
cmessage: {
type: String,
default: ‘aaaaaaaaaaaa‘,
required: true //加上这个属性就必须给cmessage传值
}
//类型是对象或者数组时，默认值必须是一个函数
cmovies: {
type: Array,
default() {
return []
}
}
},
data() {
return{
}
},
methods: {
}
}）
//root组件
const app = new Vue({
el: ‘#app‘ ,
data: {
movies: [‘海贼王‘, ‘海尔兄弟‘],
message: ‘你好啊‘
},
compotents: {
cpn //字面量增强写法
}
})
</body>
</html>
原文：https://www.cnblogs.com/tang321/p/14548552.html