1.组件可以访问Vue实例的数据吗?
组件是一个单独功能的模块的封装,有属于自己的HTML模板,也有属于自己的data
Vue.component('cpn', {
template: '#cpn', //分离写法
data() { //data是一个函数
return {
title: 'abc'
}
}
})
2.组件数据的存放
- 组件对象也有一个data属性(也有methods等属性)
- data必须是一个函数
- data函数返回一个对象,对象内部保存着数据
为什么data是返回一个函数?
这样可以使每个实例相互独立,不会相互影响(作用域相关)
实现一个将计数器封装为组件
<body>
<div id="app">
<!-- 组件实例对象 -->
<cpn></cpn>
<cpn></cpn>
<cpn></cpn>
</div>
<!-- 组件模板 -->
<template id="cpn">
<div>
<h2>当前计数:{{count}}</h2>
<button @click="increment">+</button>
<button @click="decrement">-</button>
</div>
</template>
<script>
//注册组件(全局)
Vue.component('cpn', {
template: '#cpn',
data() {
return {
count: 0
}
},
methods: {
increment() {
this.count++
},
decrement() {
this.count--
}
}
})
const app = new Vue({
el: '#app',
data: {
}
})
</script>
</body>
3.父子组件之间的通信
- 通过props(properties)向子组件传递数据
- 通过事件向父组件发送消息
父组件向子组件传递数据 props,它的值有两种方式
字符串数组,数组中的字符串就是传递时的名称。
对象,对象可以设置传递时的类型,也可以设置默认值。
<body>
<div id="app">
<!-- 使用v-bind -->
<cpn :cmovies="movies" :cmessage="message"></cpn>
</div>
<template id="cpn">
<div>
<ul>
<li v-for= "item in cmovies">{{item}}</li>
</ul>
<h2>{{cmessage}}</h2>
</div>
</template>
<script>
//子组件
const cpn = {
template: '#cpn',
props: ['cmovies', 'cmessage'], //使用props传递数据
data() {
return {}
},
methods: {
}
}
//父组件
const app = new Vue({
el: '#app',
data: {
message: '你好哇',
movies: ['海贼王', '海王', '海尔兄弟']
},
components: {
cpn
}
})
</script>
</body>
poops有多种写法,如:
props: {
//1.类型限制
cmovies: Array,
cmessage: String,
//2.提供一些没默认值
cmessage:{
type:Stirng,
default:'aaaaaaaaa',
reuqired:true //表示必须传
},
//3.类型是对象或者数组时,默认值必须是一个函数
cmovies:{
type:Array,
default(){
return []
}
}
//4.自定义类型
},
4.父子组件通信---props驼峰标识
使用 DOM 中的模板时,camelCase (驼峰命名法) 的 prop 名需要使用其等价的 kebab-case (短横线分隔命名) 命名