如何在 Vue.js 中将数据从父组件发送到子组件

Posted 2023-02-23

【中文标题】如何在 Vue.js 中将数据从父组件发送到子组件

【英文标题】：How to send data from parent to child component in Vue.js

【发布时间】：2019-04-11 22:12:10

【问题描述】：

我是 vue.js 的新手，目前我正在构建一个用于学习目的的应用程序。

我想做什么：

我有一个父组件，它有一堆不同 id 的按钮。

子组件将等待父组件发送这些 id，然后根据 id 决定显示什么。就是这样。

我不会发布完整的代码，因为它太大了，但我已经尝试了很多东西，比如 props 和 state，但老实说它太令人困惑了。

我来自 React 背景，但我仍然很困惑。

父组件

<template>
  <button id="btn1">Show banana</button>
  <button id="btn2">Show orange</button>
</template>
<script>
  export default 
   name: 'Parent',
   data: function 
       //something
   ,
   props: 
      // ?????
   
  ;
</script>

 **Child component**



    <template>
      <p v-html="something.text">
    </template>
    <script>
      export default 
       name: 'Child',
       data: function() 
         something: ''
         if(id from parent === id I want) 
             something = object.withpropIneed
          
       ,

      ;
    </script>

【参考方案1】：

您需要从父级映射数据并将其传递给子级，就是这样！ 在示例中，我传递了一个 html 字符串并绑定了通过 'fromParentHtml' 道具接收的 html 映射到子级，因此在子组件内部 'this.fromParentHtml' 传递给存在，因为它是在道具中定义的，并且每次单击父按钮时都会执行'show' 函数并通过父 'html' 数据将值从传递的 prop 更改为子级 .. =)

<template>
    <div>
        Current html sent to child 'html'
        <br>
        <button @click="show('banana')">Banana</button>
        <button @click="show('orange')">Orange</button>
        <button @click="show('apple')">Apple</button>

        <!-- Create child component -->
        <child-component :fromParentHtml="html"></child-component>

    </div>
</template>

<script>
    export default 

        name: "test3",
        components: 

            'child-component': 

                template: "<div>Child component... <br> <span v-html='fromParentHtml'></span> </div>",
                //Child component map a prop to receive the sent html from parent through the attribute :fromParentHtml ...
                props: 

                    fromParentHtml: 

                        required: true,
                        type: String
                    
                
            
        ,
        data()

            return 

                html: ''
            
        ,
        methods: 

            show(fruit)

                this.html = '<span>The fruit is ' + fruit + ' !</span>';
            
        
    
</script>

<style scoped>

</style>

如果对你有帮助，请标记为正确答案！希望对您有所帮助。

编辑 1： 假设你有 webpack 可以处理单个文件组件，导入另一个组件只需这样做：

<template>

    <div>
        <my-child-component></my-child-component>
    </div>

</template>

<script>

    //Import some component from a .vue file
    import ChildComponent from "./ChildComponent.vue";

    export default 

        components: 

            //And pass it to your component components data, identified by 'my-child-component' in the template tag, just it.
            'my-child-component': ChildComponent
        ,
        data()


        ,
        methods: 


        
    

</script>

【讨论】：

我看到您在子组件中定义了模板，但不想这样做，我想导入它，而不是使用字符串来定义模板，只需引用导入的子组件.可能吗？谢谢。

等等，你问的是从一个单独的文件中导入子组件，而不是在代码中定义类似的东西？两个 .vue 分隔的文件？就这样？

是的，这就是我要问的。

我解决了我的问题伙伴，但非常感谢你！如果您仍然可以向我展示如何使用来自不同文件的组件来执行此操作，我将不胜感激！谢谢你:)

【参考方案2】：

只是为了它，我认为您正在寻找这个：

<template>
  <button id="btn1" @click = "id = 1">Show banana</button>
  <button id="btn2" @click = "id = 2">Show orange</button>
  <child-component :childid = "id"></child-component>
</template>
<script>
  import childComponent from 'childComponent'
  export default 
  name: 'Parent',
  data () 
      return 
        id: 0
      
  ,
  components: 
    childComponent
  
  ;
</script>

**Child component**



    <template>
      <p v-html="something.text">
    </template>
    <script>
      export default 
      name: 'Child',
      props: 
        childid: String 
      ,
      data: function() 
        something: ''
        if(this.childid === whatever) 
            something = object.withpropIneed
          
      ,

      ;
    </script>

【讨论】：

props 是在组件上定义的，而不是在父组件上

【参考方案3】：

通过采用不同的方法解决了我的问题。 我已经实现了状态，并且我的组件的行为完全符合我的意愿。

我发现这个link 对我有帮助并解决了我的问题。 谢谢。

【讨论】：

请将相关代码添加到您的帖子中。如果链接消失，您的帖子将毫无用处。