VUE在实战项目开发中一些常用技巧合集

2020-07-16 11:07:50 执剑追风 79 前端开发 / VUE

持续更新一些平时在做项目时一些小技巧和知识点

兄弟组件之间传值:

兄弟之间传值借助的是 A子组件 >>> 父组件 父组件 >>>> B子组件 (以下代码是思路代码)


应用场景,A组件为表单组件,在A组件中进行表单项填写,点击查询操作后,将返回的数据填充到B组件(完成表格渲染)


父组件:


<div>

    <!-- 表单组件 -->

    <activityListform @handleSearch="handleSearch" />

    <!-- 表格组件 -->

    <activityListtable :content="Value " />

</div>

<script>

//拿到A子组件传回的对象值,然后赋给B子组件,完成A > B传值

handleSearch(queryTableDate){

      this.Value = queryTableDate

    }

</script>


A子组件

<div>

 <el-button type="primary" @click="handleSearch">查询</el-button>

</div>


B子组件

<div>

 <div>tableList:{{content}}</div>

</div>

props:{

  content:{

    type:String,

    default:""

   }

}