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 文本的主要内容,如果未能解决你的问题,请参考以下文章

将道具动态传递给VueJS中的动态组件

如何在 VueJS 中动态显示图像?

CSS3。 VueJS。动态过渡背景渐变

vuejs中通过变量动态调用方法

VueJS:如何在滚动位置后动态更改 CSS 类

如何显示和隐藏在 vue js 中动态创建的 div(多格式选项卡结构)