Vue.js——父子组件通信-子传父(自定义事件)——2020.11.27

父子组件通信-子传父(自定义事件)

    • 一丶子级向父级传递
    • 二丶案例代码
    • 三丶运行结果
            • ——天生我材必有用,千金散尽还复来——

一丶子级向父级传递

  • props用于父组件向子组件传递数据,还有一种比较常见的事子组件传递数据或事件到父组件中
  • 我们需要用自定义事件来完成
  • 什么时候需要自定义事件呢?
    • 当子组件需要向父组件传递数据时,就要用到自定义事件
    • v-on不仅仅可以用于监听DOM事件,也可以用于组件间的自定义事件
  • 自定义事件的流程:
    • 在子组件中,通过$emit()来监听事件
    • 在父组件中,通过v-on来监听子组件事件
  • 简单例子:
    • 我们之前做过两个按钮+1和-1,点击修改counter
    • 我们整个操作的过程还是在子组件中完成,但是之后的展示交给父组件
    • 这样,我们就需要将子组件中的counter,传给父组件的某个属性,比如total

二丶案例代码







<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Titletitle>
head>
<body>

<div id="app">
  <cpn @itemclick="cpnclick">cpn>
div>

<template id="cpn">
  <div>

    <button v-for="item in categories" @click="itemclick(item)">
      {{item.name}}
    button>
  div>
template>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">script>
<script>
  // 1.子组件
  const cpn = {
    template: '#cpn',
    data(){
      return{
        categories:[
          {id:'100',name:'热门推荐'},
          {id:'101',name:'手机数码'},
          {id:'102',name:'家用电器'},
          {id:'103',name:'电脑办公'},
        ]
      }
    },
    methods:{
      itemclick(item){
        console.log(item);
        //将item传给父组件,自定义
        //this.$emit('名称',传送参数)
        this.$emit('itemclick',item)
      }
    }
  }
  //2.父组件
  const app = new Vue({
    el:"#app",
    data:{

    },
    components:{
      cpn
    },
    methods:{
      cpnclick(item){
        console.log('cpnclick',item);
      }
    }
  })
script>
body>
html>

三丶运行结果

Vue.js——父子组件通信-子传父(自定义事件)——2020.11.27_第1张图片

——天生我材必有用,千金散尽还复来——

你可能感兴趣的:(Vue.js-实战开发,vue,js,react,小程序,javascript)