Vue单个文件组件:从子组件中打印组件元素
Vue单个文件组件:从子组件中打印组件元素
提问于 2020-04-04 11:20:46
我使用@vue/vli 4.1.1和单个文件组件。我的应用程序的简化结构如下所示：
src
├── App.vue
├── assets
├── components
│ ├── PrintRecipe.vue
│ └── Recipe.vue
└── main.js在配方组件中，我想包含一个打印按钮及其功能，就像在PrintRecipe组件中实现的那样。当按下按钮时，应打印来自配方组件的#recipe元素。
下面是Recipe.vue的虚拟版本：
<template>
<div>
<div id="other-content">
...
</div>
<div id="recipe">
...
</div>
<PrintRecipe/>
</div>
</template>
<script>
import PrintRecipe from './PrintRecipe.vue'
export default {
components: {
PrintRecipe
},
...
}
</script>这是PrintRecipe.vue的一个虚拟版本：
<template>
<div>
<button @click="printRecipe">Print recipe</button>
</div>
</template>
<script>
import { Printd } from 'printd';
export default {
mounted() {
this.d = new Printd()
},
methods: {
printRecipe () {
this.d.print( this.$el, [this.cssText])
}
}
}
</script>当前，这将打开一个打印视图，其中要打印的文档仅包含“打印配方”。
是否有一种方法可以访问Recipe.vue模板中的元素以便能够打印它们？
我已经做了一些研究，到目前为止，我只看到关于如何从父组件访问数据的信息，而不是元素。
回答 3
Stack Overflow用户
回答已采纳
发布于 2020-04-04 12:02:00
事实证明，Vue槽是我所需要的。
PrintRecipe组件应该有一个插槽，插入应该打印的元素。
PrintRecipe.vue
<template>
<div>
<slot/>
<button @click="printRecipe">Print recipe</button>
</div>
</template>
<script>
import { Printd } from 'printd';
export default {
mounted() {
this.d = new Printd()
},
methods: {
printRecipe () {
this.d.print( this.$el, [this.cssText])
}
}
}
</script>插入是在Recipe.vue内部通过以下方式展开PrintRecipe元素来完成的：
<template>
<div>
<div id="other-content">
...
</div>
<PrintRecipe>
<div id="recipe">
...
</div>
</PrintRecipe>
</div>
</template>
<script>
import PrintRecipe from './PrintRecipe.vue'
export default {
components: {
PrintRecipe
},
...
}
</script>Stack Overflow用户
发布于 2020-04-04 12:17:35
如果Recipe父组件可以处理交互，那么PrintRecipe就变成表示组件：
Recipe.vue
...
<div ref="recipe">...</div>
<PrintRecipe v-on:print="printRecipe" ref="printRecipe" />
...
...
methods: {
printRecipe() {
this.d.print( this.$refs.recipe.$el, [this.cssText])
}
}
...PrintRecipe.vue
...
methods: {
printRecipe() {
this.$emit('print');
}
}
...或者，PrintRecipe子程序从Recipe父级接收处理交互所必需的数据，例如对DOM元素的引用：
...
<div ref="recipe">...</div>
<PrintRecipe />
...PrintRecipe.vue
...
methods: {
printRecipe() {
this.d.print(this.$parent.$refs.recipe.$el, [this.cssText])
}
}
...组件是否必须通过$parent、道具或事件总线进行通信取决于情况。
Stack Overflow用户
发布于 2020-04-04 12:08:09
单击按钮后向Recipe.vue组件发送自定义Vue事件
export default {
mounted() {
this.d = new Printd()
},
methods: {
printRecipe () {
this.$emit('recipeClicked'); // custom event
}
}
}从Recipe.vue中，您可以接收事件并编写显示内容的逻辑。这是我的逻辑；
<template>
<div>
<div id="other-content">
...
</div>
<div id="recipe" v-show="showContent">
...
</div>
<PrintRecipe @recipeClicked="showContent=true"/>
</div>
</template>
<script>
import PrintRecipe from './PrintRecipe.vue'
export default {
components: {
PrintRecipe
},
data:()=>{
return {
showContent:false
}
}
...
}
</script>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/61027313
复制相关文章
相似问题
腾讯云开发者
