美文网首页
子组件给父组件(页面)传值

子组件给父组件(页面)传值

作者: 布呐呐aa | 来源:发表于2020-12-14 17:00 被阅读0次

子组件:
点击事件传值

       <div class="search-scan">
            <div>
              <van-row>
                <van-col :span="12">
                  <div :class="[fla,'scan-search-year']" style="font-size:3vw;"
                       @click="onBindColumn">{{selectColumn}}<i class="el-icon-caret-bottom"></i></div>
                  <div :class="[fla,'scan-search-year']" style="font-size:3vw;"
                       @click="onBindDir">{{selectDir}}<i class="el-icon-caret-bottom"></i></div>
                </van-col>
                <van-col :span="12">
                  <div :class="[fla,'scan-search-box']">
                    <input type="text" ref="search" v-model="search">
                    <button class="search-btn" @click="toSearch()">搜索</button>
                  </div>
                  <div :class="[fla,'high-search-box']" @click="toHighSearch">高级搜索</div>
                </van-col>
              </van-row>
            </div>
          </div>

js:
      toSearch(){
          this.$emit('child-event',this.cid,this.did,this.search)
  },

父组件(页面):

 <Searching @child-event="toSearch"></Searching>

直接写方法:
data代表传过来的值 ...data表示数组

 toSearch(...data){
            if(this.search !== ''){
              this.$api.post(
                `/msdg/no/content/getpuso`,
                {
                  "content":{
                    "page":1,
                    "size":10,
                    "word":data[2],
                    "column_id":data[0],
                    "direction_id":data[1]
                  }
                },
                res =>{
                  switch (res.code){
                    case 500:
                      Toast(res.msg);
                      break;
                    case 0:
                      console.log('搜索')
                      console.log(res)
                      this.qkList= res.data.list
                      break;
                  }
                }
              )
            }else{
              Toast('请输入搜索内容')
            }
          },

相关文章

  • Vue_组件间传值

    1、父组件传值给子组件2、子组件传值给父组件 1、父组件传值给子组件 2、子组件传值给父组件

  • vue2.0 父子组件传值

    父组件传值给子组件 子组件 子组件通过 props 接收值 父组件 父组件通过标签属性传值 子组件传值给父组件 子...

  • react子组件、父组件相互传值

    子组件传图片路径imgUrl值给父组件,父组件传imgaddr值给子组件子组件: 父组件:

  • 【Vue3 从入门到实战 进阶式掌握完整知识体系】011-探索组

    2、组件间传值及传值校验 父组件给子组件传值 运行结果 父组件给子组件传动态参数 运行结果 子组件校验父组件的传参...

  • 2018-09-05

    组件传值问题 父组件给子组件传值应该使用props。子组件要给父组件传值,需要调用父组件传递的方法。props传值...

  • React 父子组件通信

    父子组件通信分为【父组件给子组件传值】、【父组件获取子组件的值】两类。 一.父组件给子组件传值3种方式 1.父组件...

  • vue2.0小结

    父组件与子组件之间的通信 父组件传值给子组件,通过props 子组件传值给父组件,通过$emit 如果在父组件想在...

  • 第10节 React propTypes defaultPr

    一、父组件给子组件传值 1.1 defaultProps 父子组件传值中,如果父组件调用子组件的时候不给子组件传值...

  • 第十讲、Vue3.x父组件给子组件传值、Props、Props验

    一、父子组件介绍 二、父组件给子组件传值 1、父组件调用子组件的时候传值 2、子组件接收父组件传值 三、Props...

  • Vue.js组件传值

    子组件向父组件传值 在子组件页面触发事件$emit 在父组件中在组件标签中调用v-on事件监听 父组件向子组件传值...

网友评论

      本文标题:子组件给父组件(页面)传值

      本文链接:https://www.haomeiwen.com/subject/ljavgktx.html