VUE 父子组件通信父组件得到子组件变量，父组件侦听子组件input（附SQL 查询生成JSON方案）

最新推荐文章于 2026-04-15 11:45:54 发布

原创最新推荐文章于 2026-04-15 11:45:54 发布 · 1.2k 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

VUE 同时被 2 个专栏收录

2 篇文章

订阅专栏

前端实践笔记（vue+react）

2 篇文章

订阅专栏

本文介绍了在Vue中如何实现父子组件通信，以获取子组件（Header.vue）输入框的关键字，并利用该关键字筛选（BillList.vue）图文列表。通过子组件触发 Zi_func 事件传递变量，父组件（Bill.vue）使用 @zi_func 方法监听并获取子组件的msg变量，实现实时过滤功能。同时提到了使用ref属性进行子组件引用，以便直接访问子组件变量。

需求背景：子组件录入关键字，能自动筛选图文列表。

详细设计：
子组件1：Header.vue 是抬头部分，包含input输入框，比如我录入集团2字，放入变量msg。（后面城市筛选为测试预留）
子组件2：BillList.vue 是下方的开票信息图文列表【不是演示的这个图片轮播哦，这个有空另外再说了】

父组件：Bill.vue 通过两种方式得到子组件变量msg

总体实现方案：
子组件 this.$emit('zi_func', this.msg);
父组件： <home-header ref="header" @zi_func="getMsgFormSon" ></home-header>

总体效果：输入框过滤

1：子组件1定义：

 <input id="zinput" key = "zinput" v-model="msg" @change="onInput">

  data(){
    return {
      msg: ''
    }
  },
  
  methods: {
    //确实能够跟踪到子组件input变化
    onInput: function () {
      console.log("子组件的msg值传递给父组件:"+this.msg)
      if (this.msg.trim()) {
        this.$emit('zi_func', this.msg);
      }
    }
  }

2：父组件

注意@zi_fun="getMsgFormSon" 这样是通过函数来绑定的

ref="header"这样方便后续直接取得变量

<template>
  <div>
    <home-header ref="header"  @zi_func="getMsgFormSon"  ></home-header>
    <home-swiper :list="swiperList"></home-swiper>
    <billList :list="billList"></billList>
  </div>
</template>

      getMsgFormSon(data){
        this.msgFormSon = data
        console.log("父组件通过$emit接收到子组件的值："+this.msgFormSon)
        var str_msg = this.$refs.header.msg;//直接得到子组件的变量值 测试成功
        console.log("父组件通过$refs直接得到到子组件的值："+this.msgFormSon)
        this.getbillList();
      },



      //访问本地JSON:http://localhost:8085/static/mock/bill.json
      getbillList () {
        axios.get('/static/mock/bill.json')
          .then(this.getBillSucc)
      },
      getBillSucc (res) {
        res = res.data
        console.log(res)
        if ( res.ret_code>=0) {
          var obj = res.billListJson;
          //补充数据过滤
          //var searchText = this.$refs.header.msg;//得到了子组件的变量值
          var searchText = this.msgFormSon;//通过实时侦听绑定，得到了子组件的变量值
          let filterArr = new Array(); // 过滤数组
          filterArr = obj.filter(p => p.zname.indexOf(searchText) !== -1)
          this.billList =filterArr;
        }
      },

调试输出效果

附SQL 查询生成json方案

select '[' + STUFF((
        select 
            ',{"id":' + cast(id as varchar(20))
            + ',"zno":"' + cast(zno as varchar(max)) + '"'
			+ ',"zname":"' + cast(zname as varchar(max)) + '"'
			+ ',"address":"' + cast(address as varchar(max)) + '"'
			+ ',"phone":"' + cast(phone as varchar(max)) + '"'
			+ ',"zbank":"' + cast(zbank as varchar(max)) + '"'
			+ ',"zbankno":"' + cast(zbankno as varchar(max))  + '"'
            --+ ',"zpic":' + cast(zpic as varchar(max))
            +'}'

        from ZKP t1   order by id asc
        for xml path(''), type
    ).value('.', 'varchar(max)'), 1, 1, '') + ']'