自学Vue必看的父子组件通信（二）

文章目录

父子组件通信---父传子
父子组件通信---子传父
举例展示

HTML
JavaScript
效果图示

父子组件通信—父传子

在我的上一篇文章中提到了父子组件通信中的父传子，如何您还不了解，建议参考：自学Vue必看的父子组件通信（一），回归正题！！！

父子组件通信—子传父

子传父是当子组需要向父组件传递数据时，就要用到自定义事件。
步骤：
（1）在子组件中，通过 $emit() 来触发某一事件A
（2）在父组件中通过v-on监听事件A，完成父组件的功能，实现子传父

举例展示

注意事项：
（1）通过 $emit() 来触发某一事件A可以传参数，也可以不传参数。
（2）v-on在这里监听使用时不支持驼峰命名法，只有在脚手架中可以用驼峰命名法
（3）v-on不仅仅可以用于监听DOM事件，也可以用于组件间的自定义事件
（4）子传父在父模板中方法省略参数，在其他情况中默认传入事件对象。而这里是默认传入该参数，不是传入事件对象

HTML

  //<!-- 父组件模板 -->
<div id="app">
  //<!-- 这里不支持驼峰命名法，只有在脚手架中可以用驼峰命名法 -->
  <cpn @btn-click1="responseClick1"></cpn>
  //<!-- 省略参数，在其他情况中默认传入事件对象。而这里是默认传入该参数，不是传入事件对象-->
  <cpn @btn-click2="responseClick2"></cpn>
</div>

//<!-- 子组件模板 -->
  <template id="cpn">
    <div>
      <button v-for="book in books" @click="btn(book)">{{book.name}}</button>
    </div>
  </template>

JavaScript

<script src="../vue.js"></script>
<script>
//子组件
  const cpn = {
    template:"#cpn",
    data() {
      return {
        books:[
          {id:1, name:"红楼梦"},
          {id:2, name:"水浒传"},
          {id:3, name:"三国演义"},
          {id:4, name:"西游记"}
        ]
      }
    },
    methods:{
      btn(book) {
        //发送事件（无参数）
        this.$emit("btn-click");
        //发送事件（有参数）
        this.$emit("btn-click2",book);

      }
    }
  }
  //Vue实例
  const app = new Vue({
    el:'#app',
    data:{
      message:"hello vue"
    },
    components:{
      cpn
    },
    methods:{
      responseClick1() {
        console.log("我是没有参数的");       
      },
      responseClick2(book) {
        console.log(book);       
      }
    }
  })
</script>