如何在 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 字符串并绑定了通过 '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>

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

Answer 3

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

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