Vuejs 动态 div 文本
Posted
技术标签:
【中文标题】Vuejs 动态 div 文本【英文标题】:Vuejs dynamic div text 【发布时间】:2020-07-10 22:19:31 【问题描述】:我有一个 Vue 组件,里面有一些数据。我还有一个元素,它绑定到组件的脚本标签内的数据。问题是,我使用另一个组件将数据推送到这个组件,所以当新数据被推送时,div 应该动态变化。但是,在我的情况下不会发生这种情况。尽管数据(如果我 console.log 它)发生了变化,但 div 也不会动态变化。这是代码:
Main component:
<template>
<div class="small">
<div v-text="x">x</div>
</div>
</template>
<script>
export default
components:
ExternalComponent
,
data()
return
x: 0
,
async mounted()
,
methods:
receiveData(data)
this.x = data;
</script>
<style>
</style>
External component:
<template>
<div class="R">
</div>
</template>
<script>
import MainComponent from './MainComponent'
export default
components:
MainComponent
,
data()
return
,
async mounted()
,
methods:
clickListener()
$('.R').on('click', function(event)
MainComponent.methods.receiveData(12)
);
</script>
<style>
</style>
基本上,我希望每次在外部组件中单击某些内容时从 MainComponent 中的 div 推送和读取它(因为将发送不同类型的数据)。
【问题讨论】:
请为此发minimal reproducible example。 拜托各位,有人有想法吗? 【参考方案1】:你不能像那样在组件之间传递数据。
对于父->子通信使用道具:https://vuejs.org/v2/guide/components.html#Passing-Data-to-Child-Components-with-Props
对于子->父通信使用事件:https://vuejs.org/v2/guide/components.html#Listening-to-Child-Components-Events
对于更复杂的通信你可以使用 vuex
在子组件上直接调用方法的另一种选择是通过引用:How to access to a child method from the parent in vue.js
【讨论】:
好的,谢谢!我会尝试去做,如果它有效,我会告诉你。以上是关于Vuejs 动态 div 文本的主要内容,如果未能解决你的问题,请参考以下文章