中间人模式
在vue中 , 每一个vue实例就是一个根组件,在根组件中创建的全局组件都是属于这个根组件中的子组件.
- 中间人模式就是两个组件通过子传父, 把数据传送给根组件, 然后根组件在把数据通过父传子传送给需要的子组件
- 就是 组件A和组件B通信, 组件A把数据对象data传送给根组件, 根组件接收到后, 再把数据data 传送给组件B, 根组件在这个通信过程中就叫中间人.
- 这种方式主要就是用来熟悉组件的父传子和子传父
bus 模式
- 跟中间人模式类似, 不过比较方便, 这种模式的中间人
bus, 不用刻意的接收数据, 这个bus更像是一个临时数据存放的容器(个人理解)
首先要创建一个空的Vue对象作为 这个
bus对象
再创建两个组件child1和child2
通过bus.$emit(对象名, 数据)绑定到数据
提取数据使用bus.$on监听绑定到的数据
不好理解?直接看代码吧
<body>
<div id="app">
<child1></child1>
<child2></child2>
</div>
<script>
// 创建一个空的Vue对象作为bus对象
var bus = new Vue()
Vue.component("child1",{
template:`
<div> 发布者----
<button @click="handleClick">发布</button>
</div>
`,
methods:{
// 绑定一个事件用来触发 bus.$emit
handleClick(){
// console.log("child1--发送--","数据数据对象对象")
bus.$emit("aaaaaaa", "数据数据对象对象")
} // 在这里通过一个中间人bus, 使用 $emit 在bus上绑定数据
}
})
Vue.component("child2",{
template:`
<div> 订阅的者------</div>
`,
mounted(){
// 使用mounted 是为了自动的监听数据
console.log(" mounted 为生命周期函数,在dom创建完成后自动触发")
bus.$on("aaaaaaa", (data)=>{
// 通过中间人提取 $on 监听到的数据
console.log("child2--接收--",data)
})
}
})
var app = new Vue({
el:"#app",
})
</script>
</body>
属性和状态
- 在组件中, 属性是在在
props中定义,属性的值是由父组件来决定, 就好比人的名字,是由其长辈决定的,所以组件中不要修改属性的值, 而状态是在data中定义, 这个是属于组件自己的, 可以修改 - 代码演示
<body>
<div id="app">
<child :text="last"></child>
<hr><br>两个按钮只能点一个(次)
</div>
<script>
Vue.component("child",{
// 属性props ---- 父组件传给的属性,只有父组件可以重新传, 不允许子组件随意修改
// 状态 data ---- 组件内部的状态, 可以随意修改
props:["text"],
data(){
return{
mytext:"这是组件的状态,修改看自己心情"
}
},
template:`
<div> <button @click="handleClickProps">点击修改属性</button>
{
{ text }}
<br><br><hr><br>
<button @click="handleClickData">点击修改状态</button>
{
{ mytext }}
</div>
`,
methods:{
handleClickProps(){
// 点击后吧父组件传进来的属性值赋值给组件内的状态
this.text = this.mytext
},
handleClickData(){
// 点击后会把组件内的状态赋值给父组件传进来的属性,虽然不会使程序报错停止运行,但是会严重警告
this.mytext = this.text
}
}
})
var app = new Vue({
el:"#app",
data:{
last:"这是巴巴给你取得名字,你修改会警告"
}
})
</script>
</body>