Question

我是vuejs的新手，当我查看其文档时，我无法从其组件中获取此示例代码＆＃34;部分工作：

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.13/vue.js"></script>

<div id="example">
  <input type="text" v-model="parentMsg">
  <br>
  <child v-bind:message="parentMsg"></child>
</div>

使用Javascript：

Vue.component('child', {
  props: ['message'],
  template: '<span>testing: {{ message }}</span>'
})

new Vue({
  el: '#example'
})

我理解：模型的值可以传递给子组件的消息属性，相同内容的字符串将在＆＃34;测试后显示：＆＃34;只要我输入文本框中的任何内容。它没有发生。

我测试了jsfiddle

中的代码

Answer 1

#example的Vue实例应包含数据parentMsg。然后，孩子和父母可以使用它。因此，您需要在Vue实例中添加数据。

new Vue({
    el: '#example',
    data: function() {
        return { parentMsg: "Hi" };
    }
});

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script src="https://unpkg.com/vue"></script>
    </head>

    <script type="text/javascript">
        Vue.component('child', {
            props: ['myMessage'],
            template: '<div>{{ myMessage }}</div>'
        });

        Vue.component('two-items-child', {
            props: ['firstName', 'lastName'],
            template: '<div><div>{{ firstName }}</div><div>{{ lastName }}</div></div>'
        });
    </script>
    <body>
        <div id="app">
            <input id="inputParent" type="text" placeholder="parent" v-model="parentMsg">
            <br>
            <child my-message="Hi Vue."></child>
            <two-items-child v-bind="wholeObj"></two-items-child>
            <child :my-message="parentMsg"></child>
        </div>

        <script type="text/javascript">
            // root instance
            var vm = new Vue({
                el: '#app',
                data: {
                    parentMsg: "first msg",
                    wholeObj: {
                        firstName: "Hong",
                        lastName: "Gil-dong"
                    }
                }
            });
        </script>
    </body>
</html>

在example上查看上面的示例。该示例的数据为object，但这不是一个好方法。另请检查data must be a Function

Answer 2

父组件需要parentMsg作为数据属性，否则不会被动。

new Vue({
  el: '#example',
  data() {
    return {
      parentMsg: ''
    }
  }
})

这个vuejs＆＃34; prop down＆＃34;例如

2 个答案: