组件的类型
- Vue.component(组建名称, 组件的配置)
- 在组件中使用components的配置项来表示
- 问题:
组件命名问题
- 组件命名和html原生标签冲突 Header Footer ----> header footer
- 大驼峰的写法
Vue.componennt('ZhangJun',{
template: '<div></div>'
})
<div id = "app">
<!-- <ZhangJun></ZhangJun> 错的-->
<zhang-jun></zhang-jun>
</div>
.box{
background-color: red
}
box.style.backgroundColor = 'red'
组件通信
注意: 组件通信, 无论效果是如何的, Vue都是单向数据流(组件之间的数据通信)
- 父子组件通信
- 绑定的是简单类型数据
- 父组件中定义数据, 通过单向数据绑定的形式, 将数据绑定在子组件身上, 属性是自定义属性,
- 子组件通过配置项中的props接收数据, props可以是一个数组,数组中放的是自定义属性名称
- 那么这个自定义属性可以向data中的数据一样直接在子组件模板中使用
- 父组件中数据一旦修改, 子组件数据就会修改, 那么这也就是单项数据流
- 子父通信(效果上像, 间接的使用了父组件的东西 ) 【不推荐大家使用】
eg:HTML部分
<body>
<div id="app">
<Father></Father>
</div>
<template id="Father">
<div class="father_box">
<h3>骏仔</h3>
<Son v-bind:money='money'></Son>
<!-- <Son :money='money'></Son> -->
</div>
</template>
<template id="Son">
<div id="Son_box">
<p>骏仔今天洗了:{
{money}}次脚</p>
</div>
</template>
</body>
js部分
<script>
Vue.component('Father',{
template: '#Father',
data(){
return {
money:1000
}
}
})
Vue.component('Son',{
template:'#Son',
props:['money']
})
new Vue({
el:'#app',
})
</script>
- 绑定复杂数据类型 --------
- 父组件中的数据是一复杂数据类型, 那么父组件绑定数据的时候, 给子组件的是一个引用地址
- 子组件可以通过这个引用地址, 修改这个数据
- 效果上像, 子组件和父组件通信了, 违背单项数据流
eg:HTML部分
<body>
<div id="app">
<Father/>
</div>
<template id="father">
<div id="father_box">
<h3>Father</h3>
<p>我现在有: {
{sifangqian.money}}元</p>
<son :sifangqian='sifangqian'> </son>
</div>
</template>
<template id="son">
<div id