Vue 组件通信 - 子传父

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 组件通信 - 子传父