通讯:
1. 为什么要传值:组件是独立的,封装重用
传什么展现什么
2. 父传子--自定义属性
在父组件定义一个自定义属性
在子组件中使用props接收
3. 子传父--自定义方法
$emit触发自定义的事件处理函数 $on监听接收
4. 非父子--中间人模式+状态管理工具
localstorage :
sessionstorage cookie有兼容问题
媒介/中间人/:bus
vuex:项目比较复杂,集中管理状态
在购物车结算的时候会用到
以上就是关于我对组件间的通讯的总结
一. 父组件向子组件传值
1. 使用props建立数据通道的渠道
// 这是父组件 <div id="app">
// 这是子组件 <child message="hello" ></child>
</div>
2 . 在子组件中通过props传递过来的数据
Vue,component('child',{
props:['message']
})
二. 子组件向父组件传值
1. 子组件中需要一个点击事件触发一个自定义事件
Vue.component('son',{
methods:{
handleClick(){
// 在相应该点击事件的函数使用$emit来触发一个自定义事件,并传递一个参数
this.$emit('toFather',123)
}
},
template:`
<div>
<h1>这是子组件</h1>
<button @click="handleClick" >
发送给父组件
</button>
</div>
`
})
2. 在父组件中的子标签监听该自定义事件得到传递的值
三. 非父子组件传值
有时候两个组件也需要传值(非父子关系),所以我们需要一个公共的vue来进行传递值和获取值
1 . 创建一个空的vue
// 创建一个空的公共的vue对象
var bus = new Vue();
2 . 在组件1中,定义$emit来发送数据
bus.$emit('test','数据')
3 . 在组件2中使用$on来接收传递的数据
bus.$on('test', function(num) {
this.getData = num;
//事件的解绑问题
bus.$off("test")
})
当然非父子传值的方法不只有一种我们也可以使用 localstorage 来传值和取值
// 在第一个组件中 setItem 设置值
localstorage.setItem('test','数据')
// 在第二个组件中 getItem 获取值
localStorage.getItem("test");