父子通信
father
<template>
<div>
<p>home</p>
<left :users="users"></left>
<right></right>
</div>
</template>
<script>
import left from "./LeftChild"
import right from "./RightChild"
export default {
name:"home",
components:{
left,right
},
data(){
return{
msg:'这是条数据',
users:[1,2,3]
}
},
}
</script>
<style>
</style>
child
<template>
<div>
<p>LeftChild</p>
<!-- 必须有key 对象 -->,.
<li v-for="(value,key) in users" v-bind:key="key">
{{value}} {{key}}
</li>
</div>
</template>
<script>
export default {
name:"LeftChild",
props:{
users:{
require:true,
type:Array
}
}
}
</script>
<style>
</style>
传值数据更新监听
//父容器 按钮改变值
//子容器
beforeUpdate(){
console.log('数据更新之前');
},
updated(){
console.log('数据更新完毕');
},
子像父传递
我只放入了关键代码
//子容器事件
<el-button type="success" @click="change">btn1</el-button>
change(){
console.log("change")
this.$emit("test","子容器的信息")
}
// 父容器响应
{{title}}
<left v-on:test="update"></left>
update(e){
console.log("update")
this.title = e
}
事件组件通信
//在src 下面建 event.js
import Vue from "vue"
const vm = new Vue
export default vm
//都需要导入 import vm from "../event"
// 孩子组件的事件
change(){
vm.$emit("data","hello world")
}
// 父组件写在 mounted 里面
mounted(){
vm.$on("data",res=>{
console.log(res)
this.title = res
})
},
ps:
JSON.stringify(state.subscribeList); // array -> string
JSON.parse(window.localStorage.getItem("subscribeList")); // string -> array
refs 通信
//获得当前组件 然后调用它的方法
mounted(){
const left = this.$refs.left
console.log(left.title)
left.test()
},