父传子组件，搜索框跳转传值

父文件里面的值

代码如下

	<!-- 新加入列表对话框 -->
		<el-dialog :visible.sync="open" :title="title" width="880px" append-to-body>
			<el-form :rules="rules" ref="form" label-width="110px" :model="form" size="small">
				<el-form-item label="重点企业类型" prop="label">
					<el-select v-model="form.label" placeholder="请选择企业类型" clearable>
						<el-option v-for="dict in dict.type.enterprise_type_key" :key="dict.value" :label="dict.label" :value="dict.label" />
					</el-select>
				</el-form-item>
				<el-form-item label="企业名称" prop="entName">
					<el-input placeholder="请选择企业名称" v-model="form.entName" clearable @keyup.enter.native="handleOpenBrandList">
						<el-button slot="append" icon="el-icon-search" @click="handleOpenBrandList"></el-button>
					</el-input>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button type="primary" @click="submit">确 定</el-button>
				<el-button @click="cancel">取 消</el-button>
			</div>
		</el-dialog>

• 当点击按钮或者回车键，都会触发handleOpenBrandList事件，
• 这个handleOpenBrandList事件，里面可以获取输入框里面输入的值，console.log('form.entName', this.form.entName),
  • 这个事件：一、获取输入框的值；二、把这个值传给即将打开的子组件；

  	handleOpenBrandList() {
                         //刚好可以打印出输入框里面的值
    		console.log('form.entName', this.form.entName)
    		// 打开企业名称对话框，这个子组件
    		this.$refs.brands.openDialog(this.form.entName)
    	},
  

  • 这个openDialog,就是子组件里面的函数，上面的代码就是调用这个函数。

这是子组件

<!-- 企业名称对话框 -->
		<select-company ref="brands"  @getRowDataBrand="getRowDataBrand"></select-company>

在子组件里面

/**
		 * @description: 打开弹出层方法
		 * @return {*}
		 */
		openDialog(name) {
			console.log(name, '22222')
			this.queryParams.name = name
			this.open = true
			this.resetQuery()
		},

• 这个括号里面的name就是，从上级传过来的this.form.entName

传到子组件里面