Vuejs 动态 div 文本

Posted 2023-02-22

【中文标题】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

【讨论】：

好的，谢谢！我会尝试去做，如果它有效，我会告诉你。