父子组件信息传递（子传父）

Posted 2021-03-10 xiaoguniang0204

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了父子组件信息传递（子传父）相关的知识，希望对你有一定的参考价值。

子组件传递信息至父组件：
1、子组件发射自定义事件及信息，自定义事件名称b=function(){this.$emit("发射事件a"，参数)}
2、自定义模版中，设置对自定义事件的触发条件监听，如@click=“自定义事件b”
3、父组件中设置监听，@“发射事件a及参数”="父组件事件c及参数"，实现将子组件信息传至父组件
从而实现子组件信息传达至父组件

<body>
<div id = "app">
<cnp @btclick="fclick"></cnp>
</div> 
<!-- //template 编写自己的模版 -->
<template id = "mytemp">
  <div>
//v-on绑定自定义事件
    <button v-for="item in categories" @click="chclick(item)" >
      {{item.name}}
    </button>
  </div>
</template>
<script>
  //创建子组件 #mytemp 创建组件构造器对象
  const cnp = {
    template:"#mytemp",
    data () {
      return {
        categories:[
          {id:"aaa",name:"电器"},
          {id:"bbb",name:"食品"},
          {id:"ccc",name:"服装"},
        ]    
      }
    },
    methods: {
      chclick(item){
        //发射事件（自定义事件）：名称，参数
        this.$emit("btclick",item)
      }
    }
  }

//创建父组件
  const app = new Vue({
    el:"#app",
    data () {
      return {        
      }
    },
    methods:{
      fclick(item){
        console.log(‘打印子组件传递信息‘ + item.name);
      }
    },
    //组件注册的语法糖 
    components: {
      cnp      
    }    
  });
</script>
</body>
 

以上是关于父子组件信息传递（子传父）的主要内容，如果未能解决你的问题，请参考以下文章

Vue2.0的三种常用传值方式父传子子传父非父子组件传值

uni-app父子组件传递数据（更新中）

react最简单的子传父方案教学

父子组件数据传递

vue的组件通讯父传子 -- 子传父-- 兄弟组件的传值 vue的组件传值

React传值（子传父，父传子）