电子商务网站建设和管理的意义页面紧急情况访问升级跳拿笔记

Vue 渐进式JavaScript 框架 基于Vue2的学习笔记 - Vue 组件通信 - 子传父

目录

子传父

场景

应用

传参数给父

总结

---

子传父

场景

在组件中点击按钮，改变全局变量，而后控制其他组件。

应用

父向子组件上增加了监听事件，来通过子组件操作触发父组件事件。

示例如下：

<script src="../lib/vue.js"></script>
<div id="box"><navbar @myevent="handleEvent"></navbar><sidebar v-show="isShow"></sidebar>
</div>
<script>// 定义一个全局组件Vue.component("navbar", {template: `<div style="background-color: red"><button @click="handleClick()">点击</button>-导航栏</div>`,methods: {handleClick() {console.log("子传父，告诉父组件，取反isShow")this.$emit("myevent")}}})Vue.component("sidebar", {template:`<div style="background-color: yellow"><ul><li>第一行</li><li>第二行</li><li>第三行</li>
</ul>
</div>`})let vm = new Vue({el:"#box",data:{isShow: true},methods: {handleEvent() {console.log("触发父组件定义的事件")this.isShow = !this.isShow}}})
</script>

效果：

实现点击后 列表的显示和隐藏

传参数给父

还是通过子组件触发父组件事件，这次增加了参数。

示例如下：

// 定义一个全局组件
Vue.component("navbar", {template: `<div style="background-color: red"><button @click="handleClick()">点击</button>-导航栏</div>`,methods: {handleClick() {console.log("子传父，告诉父组件，触发事件")this.$emit("myevent", 10000)}}
})

 

 父组件接收传参，示例如下：

let vm = new Vue({el:"#box",data:{isShow: true},methods: {handleEvent(state) {console.log("触发父组件定义的事件，接收参数", state)this.isShow = !this.isShow}}
})

效果：

总结

Vue 渐进式JavaScript 框架 基于Vue2的学习笔记 - Vue 组件通信 - 子传父