Question

我是vue.js的新手，目前正在开发用于学习目的的应用程序。

我想做什么：

我有一个父组件，其中有一堆具有不同ID的按钮。

子组件将等待父组件发送这些ID，并将根据ID决定显示什么内容。就是这样。

我不会发布完整的代码，因为它太大了，但是我尝试了很多诸如道具和状态之类的东西，但是老实说，它是如此令人困惑。

我来自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字符串并绑定了通过通过映射到child上的'fromParentHtml'prop接收到的html，因此在子组件'this.fromParentHtml'内部存在传递，因为它是在props中定义的，并且每次单击父按钮时都会执行“显示”功能，并通过父“ 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对我有帮助，并解决了我的问题。谢谢。

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

3 个答案: