组件基本概念
vue组件都是vue实例 ,只有当组件被使用的时候才能被当作组件 ,不然都只是一份普通的对象.
- 全局组件:Vue.component(组件名，{})
- 局部组件: 1.声明 2.注册(在哪用就在哪注册) 3.使用
自定义组件中的data是一个函数,返回值是一个对象 ,这个对象里面放的才是我们组件内部的数据 ,这样做是为了保证组件之间的独立性
组件之间关系
子父组件跟全局组件局部组件没有任何关系 . A组件用了B组件 那么 A就是父组件 B就是子组件
子父组件之间的数据交互
父传子： 让子组件使用父组件的数据
- $parent 通过获取组件的方式
- 自定义属性 + props (type default required validator) 官方推荐
- $attrs 可以获取没有被props接收的剩余的属性
- provide/inject
- $children + 索引
- $refs
子传父： 通过让子组件告诉父组件要执行什么代码
- $parent
- 自定义事件 + $emit ： 所有再组件上边的事件都是自定义事件
- $listeners 获取传给子组件的所有的自定义事件
- provide/inject provide(){return {name:this.name}}
兄弟组件之间数据交互 EventBus
<body>
<div id="app">
<bro1></bro1>
------------------------
<bro2></bro2>
</div>
</body>
<template id="bro1">
<div>
<h1 :style="{color:col1}">hello brother1</h1>
<button @click="fn1">改变bro2的字体颜色</button>
</div>
</template>
<template id="bro2">
<div>
<h1 :style="{color:col2}">hello brother2</h1>
<button @click="fn2">改变bro1的字体颜色</button>
</div>
</template>
</html>
<script src="../node_modules/vue/dist/vue.js"></script>
<script>
Vue.component('bro1',{
template:'#bro1',
data(){
return {
col1:'blue'
}
},
created(){
//
bus.$on('change1',(val)=>{
this.col1 = val
})
},
methods:{
fn1(){
bus.$emit('change2','green')
}
}
})
Vue.component('bro2',{
template:'#bro2',
data(){
return {
col2:'red'
}
},
created(){
//
bus.$on('change2',(val)=>{
this.col2= val
})
},
methods:{
fn2(){
bus.$emit('change1','pink')
}
}
})
const bus = new Vue();
// console.log(bus.$event)
let vm = new Vue({
el: '#app',
data: {
name: "polikesen"
}
})
</script>
vuex能够实现所有类型的数据交互传递
简单的实现下:
<body>
<div id="app">
<h1>{{name}}</h1>
<show></show>
<btn></btn>
{{$store.state.count}}
</div>
</body>
</html>
<template id='btn'>
<div>
<button @click="$store.commit('add')">+</button>
<button @click="$store.commit('sub')">-</button>
{{$store.state.count}}
</div>
</template>
<template id='show'>
<div>
<h1>当前的数字是{{$store.state.count}}</h1>
</div>
</template>
<script src="../node_modules/vue/dist/vue.js"></script>
<script src="../node_modules/vuex/dist/vuex.js"></script>
<script>
Vue.component('btn',{
template:'#btn',
created(){
console.log(this)
}
})
Vue.component('show',{
template:'#show',
created(){
console.log(this)
}
})
let store = new Vuex.Store({
state:{
count:100,
},
mutations:{
add(n){
//n就是上边的state
n.count++
},
sub(state){
state.count--
}
}
})
let vm = new Vue({
el:'#app',
store,
data:{
name:"polikesen"
}
});
</script>
