node.js - 如何在 Vue.js 中从父组件向子组件发送数据

Question

我是 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>

Answer 1

您需要映射来自父级的数据并将其传递给子级，就是这样!在示例中，我传递一个 html 字符串并绑定(bind)通过映射到子组件的 'fromParentHtml' 属性接收的 html，因此在子组件 'this.fromParentHtml' 中传递到存在，因为它是在 props 中定义的，每次单击父按钮时都会执行'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>