从 vue.js 3 中传递数据的方法渲染组件

Posted 2023-02-23

【中文标题】从 vue.js 3 中传递数据的方法渲染组件

【英文标题】：Render component from method passing data in vue.js 3

【发布时间】：2021-09-29 12:21:14

【问题描述】：

我正在尝试从 vue.js 3 中父模板中存在的方法调用组件。 这个想法是当我点击一个按钮时，子组件会被调用一些数据并呈现在特定的部分。

App.vue

<span v-on:click="callChildComponent">Call Child</span>
<ChildComponent :tagId="0" />
....
<script>
import ChildComponent from ...

export default 
  components: 
    ChildComponent
  ,
  data() 
    return 
      tagId: ''
    
  
  ...
  methods: 
  callChildComponent: function()
    ????
  
  ...
</script>

ChildComponent.vue

<template>
  <div> tagId 
</template>
<script>
export default 
  ...
  props: 
    tagId: Number
  

</script>

也许这不是正确的方法......

感谢任何帮助。谢谢！

【参考方案1】：

您可以在要渲染的组件中使用 v-if。 v-if 值将是一个布尔本地数据属性，您可以使用您创建的 callChildComponent 函数进行切换。

<span v-on:click="callChildComponent">Call Child</span>
<ChildComponent v-if="showChildComponent" :tagId="0" />
....
<script>
import ChildComponent from ...

export default 
  components: 
    ChildComponent
  ,
  data() 
    return 
      tagId: '',
      showChildComponent: false
    
  
  ...
  methods: 
  callChildComponent: function()
    this.showChildComponent = !this.showChildComponent
  
  ...
</script>

【参考方案2】：

谢谢@Abregre。

我是这么想的

App.vue

<span v-on:click="callChildComponent">Call Child</span>
<ChildComponent v-if="tagId != null" :tagId="tagId" />
....
<script>
import ChildComponent from ...

export default 
  components: 
    ChildComponent
  ,
  data() 
    return 
      tagId: null
    
  
  ...
  methods: 
  callChildComponent: function(tagId)
    this.tagId = tagId
  
  ...
</script>

ChildComponent.vue

<template>
  <div> tagId 
</template>
<script>
export default 
  ...
  props: 
    tagId: Number
  

</script>

【讨论】：

不错。但仅供参考，从父组件控制 childComponent 渲染更干净。否则，当您使用 v-if 时，它仍在渲染但没有内容。你也可以在你的 childComponent 中为你的 prop 设置一个默认值（null 或任何东西）

当然... 代码已编辑。感谢您的帮助！