在子组件中重用父组件的方法
Reusing method from parent component inside child component
我的应用程序的结构是这样的:
根组件(安装在main.js内部(用vue-cli生成)):
<template @parallax-event="parallaxHandler" >
<div id="app">
<RepeatingWords></RepeatingWords>
<NavigationBar></NavigationBar>
<Intro></Intro>
<router-view />
</div>
</template>
该组件的脚本如下所示:
export default {
components: {
RepeatingWords,
NavigationBar,
Intro,
},
data() {
return {
parallaxMovement: Number,
myWorldParagraph: String,
}
},
methods: {
parallaxHandler(factor, htmlElementString) {
this.parallaxMovement = Math.round((window.scrollY / window.outerHeight) * - factor);
this.myWorldParagraph = htmlElementString;
console.warn(htmlElementString);
htmlElementString.style.transform = 'translateX(' + (this.parallaxMovement - 0) + 'px)';
}
},
};
现在在我的子组件中(我想使用这个方法/触发这个事件)我有这个:
parallaxScrollEffect() {
this.$emit('parallax-event', [200, document.querySelector('.some-html-elem')]);
},
mounted() {
window.addEventListener('scroll', this.parallaxScrollEffect);
},
到目前为止发生了两件事:
- 在 Vue DevTools 选项卡 Events 上触发事件(很多是因为滚动),
- 参数有我给的值
- 没有任何控制台警告,
- 元素没有移动,除了 vue 工具,我没有得到任何反馈
我试过了:
- 在原始方法中说 factor.target 和 htmlElementString.target 但那没有用,
删除函数内除控制台日志之外的所有内容,并传递一个带有一些乱码字符串值的单个变量,例如:
this.$emit('parallax-event', ['123123qwe');
这也没有用。
我做错了什么?!
提前致谢。
编辑:修复了小错误 - 不是父变量而是参数
我整理了一个示例,遇到了两个与您的来源有关的问题。
- 我不得不将 "v-on" 处理程序放在子组件上,而不是放在根模板上。
- 发出的数组将是您的 parallaxHandler 的第一个参数。
根据 VueJS 文档:
Or, if the event handler is a method:
Then the value will be passed as the first parameter of that method:
https://vuejs.org/v2/guide/components.html#Emitting-a-Value-With-an-Event
示例App.vue:
<template >
<div id="app">
{{ emittedData }}
<emit-test @emit-test="setEmittedData" />
</div>
</template>
<script>
import EmitTest from './components/EmitTest.vue';
export default {
name: 'app',
data() {
return {
emittedData: ''
};
},
components: {
EmitTest
},
methods: {
setEmittedData(val) {
this.emittedData = val;
}
}
};
</script>
<style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
示例EmitTest.vue:
<template>
<button @click.prevent="emitToParent">Emit Array</button>
</template>
<script>
export default {
methods: {
emitToParent() {
this.$emit('emit-test', ['value 1', 'value 2']);
}
}
};
</script>
<style lang="scss" scoped>
</style>
单击按钮后的预期和测试输出:
[ "value 1", "value 2" ]
我的应用程序的结构是这样的:
根组件(安装在main.js内部(用vue-cli生成)):
<template @parallax-event="parallaxHandler" >
<div id="app">
<RepeatingWords></RepeatingWords>
<NavigationBar></NavigationBar>
<Intro></Intro>
<router-view />
</div>
</template>
该组件的脚本如下所示:
export default {
components: {
RepeatingWords,
NavigationBar,
Intro,
},
data() {
return {
parallaxMovement: Number,
myWorldParagraph: String,
}
},
methods: {
parallaxHandler(factor, htmlElementString) {
this.parallaxMovement = Math.round((window.scrollY / window.outerHeight) * - factor);
this.myWorldParagraph = htmlElementString;
console.warn(htmlElementString);
htmlElementString.style.transform = 'translateX(' + (this.parallaxMovement - 0) + 'px)';
}
},
};
现在在我的子组件中(我想使用这个方法/触发这个事件)我有这个:
parallaxScrollEffect() {
this.$emit('parallax-event', [200, document.querySelector('.some-html-elem')]);
},
mounted() {
window.addEventListener('scroll', this.parallaxScrollEffect);
},
到目前为止发生了两件事:
- 在 Vue DevTools 选项卡 Events 上触发事件(很多是因为滚动),
- 参数有我给的值
- 没有任何控制台警告,
- 元素没有移动,除了 vue 工具,我没有得到任何反馈
我试过了:
- 在原始方法中说 factor.target 和 htmlElementString.target 但那没有用,
删除函数内除控制台日志之外的所有内容,并传递一个带有一些乱码字符串值的单个变量,例如:
this.$emit('parallax-event', ['123123qwe');
这也没有用。
我做错了什么?!
提前致谢。
编辑:修复了小错误 - 不是父变量而是参数
我整理了一个示例,遇到了两个与您的来源有关的问题。
- 我不得不将 "v-on" 处理程序放在子组件上,而不是放在根模板上。
- 发出的数组将是您的 parallaxHandler 的第一个参数。
根据 VueJS 文档:
Or, if the event handler is a method: Then the value will be passed as the first parameter of that method: https://vuejs.org/v2/guide/components.html#Emitting-a-Value-With-an-Event
示例App.vue:
<template >
<div id="app">
{{ emittedData }}
<emit-test @emit-test="setEmittedData" />
</div>
</template>
<script>
import EmitTest from './components/EmitTest.vue';
export default {
name: 'app',
data() {
return {
emittedData: ''
};
},
components: {
EmitTest
},
methods: {
setEmittedData(val) {
this.emittedData = val;
}
}
};
</script>
<style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
示例EmitTest.vue:
<template>
<button @click.prevent="emitToParent">Emit Array</button>
</template>
<script>
export default {
methods: {
emitToParent() {
this.$emit('emit-test', ['value 1', 'value 2']);
}
}
};
</script>
<style lang="scss" scoped>
</style>
单击按钮后的预期和测试输出: [ "value 1", "value 2" ]