1. 父给子通信
//父组件
<child :fathertochild="msg"></child>
<script>
import child from ''
export default{
components:{
child
},
data(){
return {
msg:"父向子传的值"
}
}
}
</script>
//子组件
<script>
export default{
data(){
},
props:{
fathertochild:String
}
}
</script>
2. 子向父传值
//子组件
//定义一个子组件传值的方法
<input type="button" @click="childclick">
<script>
export default {
data () {
return {
childValue: '我是子组件的数据'
}
},
method:{
childclick(){
//fatherMethod是在父组件on监听的方法
//第二个参数是需要传给父亲的数据
this.$emit("fatherMethod",this.childValue)
}
}
}
</script>
<!-- 引入子组件 定义一个on的方法监听子组件的状态-->
<child v-on:fatherMethod="myMethod"></child>
<script>
import child from './child'
export default {
components: {
child
},
data(){
name:""
},
method:{
myMethod:function(childvalue){
// childValue就是子组件传过来的值
this.name=childvalue
}
}
</script>
3. 兄弟组件传值 eventbus
- 专门用一个空的 Vue 实例（Bus）来做中央事件总线更加清晰也易于管理。
- eventBus.js
import Vue from 'vue'
let connect = new Vue() // 实例
export default connect
//组件a
<div @click="onclcik"></div>//点击触发传值事件
<script>
import connect from './eventBus'
export default{
data(){
return{
msg:"组件a要传数据给b"
}
},
methods:{
onclick(){
connect.$emit("activebus",this.msg)
}
}
}
</script>
//组件b
<script>
import connect from './eventBus'
export default{
data(){
return{
msg:""
}
},
//组件未加载时执行事件
mounted:{
connect.$on("activebus",val=>{
//箭头函数才会绑定this
this.msg=val;
})
}
}
3. vue路由传参
4. 利用本地缓存存储
5. vuex
-
vuex主要做数据交互，维护公共状态或数据
-
image
- 可以通过 store.state 来获取状态对象，以及通过 store.commit 方法触发状态变更：store.commit('increment')，我们通过提交 mutation 的方式，而非直接改变 store.state.totalPrice，是因为我们想要更明确地追踪到状态的变化，简单的约定能够让你的意图更加明显，这样你在阅读代码的时候能更容易地解读应用内部的状态改变。
- Vuex 的状态存储是响应式的。当 Vue 组件从 store 中读取状态的时候，若 store 中的状态发生变化，那么相应的组件也会相应地得到高效更新。
- Action可以进行一些异步的操作，然后再去触发mutation，所以与后端的一些接口都必须放在action里面
- mutation必须是同步操作数据方式
- Vuex 允许我们在 store 中定义“getter”（可以认为是 store 的计算属性）。就像计算属性一样，getter 的返回值会根据它的依赖被缓存起来，且只有当它的依赖值发生了改变才会被重新计算
- 在用到state直接获取的地方，用getters的方式获取，而不是直接从state拿数据
- Vuex 允许我们将 store 分割成模块（module）。每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块——从上至下进行同样方式的分割，每个状态集最后合成到一个总的store中
- 有的组件中获取到 store 中的state, 需要对进行加工才能使用，computed 属性中就需要写操作函数，如果有多个组件中都需要进行这个操作，那么在各个组件中都写相同的函数，那就非常麻烦，这时可以把这个相同的操作写到store 中的getters, 每个组件只要引用getter 就可以了，非常方便。Getter 就是把组件中共有的对state 的操作进行了提取，它就相当于 对state 的computed. 所以它会获得state 作为第一个参数
网友评论