大家好，又见面了，我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。
Jetbrains全系列IDE稳定放心使用
1、前言
日常积累，欢迎指正
2、正文
- vue2.6.11
- 博客正文为三种方法的核心代码记录，
源代码在vue-project的分支 dev-005,可以直接获取代码运行查看
2.1、子组件中直接 this.$parent.parentNameInParentMethod()
/** 父组件 */
export default {
methods: {
searchEnter:function(){
console.log('search enter')
}
}
}
/** 子组件 */
export default {
name: "HomeHeader",
methods: {
enterFn: function() {
this.$parent.searchEnter()
}
}
}
<input placeholder="请输入关键字" @keyup.enter="enterFn" />
如果有向父组件传参数的需求的话只需要添加参数即可
export default {
name: "Search",
methods: {
enterFn: function() {
this.$parent.searchEnter(this.inputText)
}
},
data() {
return {
inputText: ""
};
}
}
<input placeholder="请输入关键字" v-model="inputText" @keyup.enter="enterFn" />
可以在调用时直接传参吗?
2.2、使用 $emit() 给组件一个自定义事件
子组件
export default {
name: "HomeHeader",
methods: {
enterFn: function() {
this.$emit('enter');
}
}
}
<input @keyup.enter="enterFn" />
<!-- 或者 不借助当前组件的 enterFn 方法 直接使用内联语句 @keyup.enter="$emit('enter')" -->
<input @keyup.enter="$emit('enter')" />
父组件
export default {
name: "HomeHeader",
methods: {
searchEnter: function() {
console.log("search enter");
}
}
}
<Search @enter="searchEnter" />
如果要传参数的话
子组件
export default {
name: "HomeHeader",
methods: {
enterFn: function() {
this.$emit('enter',this.inputText);
}
},
data() {
return {
inputText: ""
};
}
}
<input @keyup.enter="enterFn" v-model="inputText" />
<!-- 这里也可以 不借助当前组件的 enterFn 方法 直接使用内联语句 @keyup.enter="$emit('enter',inputText)" -->
<input @keyup.enter="$emit('enter',inputText)" v-model="inputText" />
父组件
export default {
name: "HomeHeader",
methods: {
searchEnter: function(value) {
console.log("search enter");
console.log(value)
}
}
}
<Search @enter="searchEnter" />
2.3、使用 props – 推荐
我是从 react 过来的，这种方式与 react 子组件向父组件传值(子组件调用父组件方法)非常相似
子组件
<input placeholder="请输入关键字" v-model="inputText" @keyup.enter="enterFn" />
<!-- 可以不借助 enterFn 方法直接 @keyup.enter="enter" 这种写法就不需要中间函数 enterFn 了 看起来更简洁 -->
<input placeholder="请输入关键字" v-model="inputText" @keyup.enter="enter" />
export default {
name: "Search",
props: {
enter: {
type: Function,
default: null
}
},
methods: {
enterFn: function() {
if (this.enter) {
this.enter()
this.enter(this.inputText) // 如果要传参数直接在这里传递就好了
}
}
},
data() {
return {
inputText: ""
};
}
};
父组件
<Search :enter="searchEnter"/>
import Search from "../Search/index.vue";
export default {
name: "HomeHeader",
components: {
Search
},
methods: {
searchEnter: function() {
console.log("search enter");
}
}
};
如果想要传递参数的话
export default {
name: "Search",
props: {
enter: {
type: Function,
default: null
}
},
methods: {
enterFn: function() {
if (this.enter) {
this.enter(this.inputText) //
/** * 在这里传递或直接内联调用 enter 方法传递 * * <input placeholder="请输入关键字" * v-model="inputText" * @keyup.enter="enter(inputText)" * /> */
}
}
},
data() {
return {
inputText: ""
};
}
};
父组件
<Search :enter="searchEnter"/>
import Search from "../Search/index.vue";
export default {
name: "HomeHeader",
components: {
Search
},
methods: {
searchEnter: function(value) {
console.log("search enter")
console.log(value)
}
}
};
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
发布者：全栈程序员-用户IM，转载请注明出处：https://javaforall.cn/186768.html原文链接：https://javaforall.cn
【正版授权，激活自己账号】： Jetbrains全家桶Ide使用，1年售后保障，每天仅需1毛
【官方授权 正版激活】： 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...
