现有一个组件,组件名:search。里面有一个input的值及绑定方法需要由父组件来决定。放在不同的父组件可能需要实现的数据及功能不一样,所以不能写成固定方法。
比如参数 tag 在用户模块,tag需要是“用户”,searchFun方法需要查询所有用户;在方案模块,tag需要是“方案”,searchFun方法需要查询所有方案。
search子组件代码如下:
<template>
<div>
<input type="button" :value="tag" v-on:click="searchFun" class="minInput" />
</div>
</template>
<script>
export default {
name: "search",
data() {
aa: 1,
bb: 2
},
props: ["tag"],
mounted() {
},
methods: {
searchFun:function(){
this.$emit("search",this.aa,this.bb);
}
}
};
</script>
这段代码内:
数据绑定使用::value="tag"
,tag是绑定的参数名。
方法绑定使用:v-on:click="searchFun"
,searchFun是方法名。
调用子组件的父组件代码如下:
<template>
<div>
<search :tag="tagRecord" v-on:search="recordFun"></search>
</div>
</template>
<script>
import search from "../components/search";
export default {
name: "index",
data() {
return {
tagRecord:"查询方案记录"
};
},
components: {
search
},
methods: {
recordFun(aa,bb){
console.log(aa);
console.log(bb);
}
}
};
</script>
先import子组件后,在components内写上引入的组件名search。
调用子组件的时候需要写入父组件需要传的tag参数值,及父组件需要传给input触发事件的方法名。
写入子组件的时候写法:
<search :tag="tagRecord" v-on:search="recordFun"></search>
这里传给tag
的值就是父组件中tagRecord
的值;
传给search
方法的值就是父组件中recordFun()
方法。
注意:
v-on:search
需和子组件中的this.$emit("search",xx);
的search
一致。this.$emit
中search
是自定义方法的方法名,xx
是子组件传给父组件的参数,v-on:search="recordFun"
则是指父组件中的recordFun
方法绑定等于search
方法。
网友评论