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

Question

我正在尝试从 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>

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

感谢任何帮助。谢谢！

Answer 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>

Answer 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>