Vue.js Laravel 5.4 Vue声明式呈现_Vue.js_Laravel 5.4

Vue.js Laravel 5.4 Vue声明式呈现

vue.js

Vue.js Laravel 5.4 Vue声明式呈现,vue.js,laravel-5.4,Vue.js,Laravel 5.4,在laravel 5.4环境中，我希望在Example.vue的面板标题中呈现文本“Example”。执行npm run watch后，我收到以下Vue警告： '属性或方法“message”未在实例上定义，但在呈现期间被引用。请确保在数据选项中声明被动数据属性。” app.js require('./bootstrap'); window.Vue = require('vue'); Vue.component('example', require('./components/Example.

在laravel 5.4环境中，我希望在Example.vue的

面板标题中呈现文本“Example”。执行npm run watch
后，我收到以下Vue警告：
'属性或方法“message”未在实例上定义，但在呈现期间被引用。请确保在数据选项中声明被动数据属性。”
app.js
require('./bootstrap');

window.Vue = require('vue');

Vue.component('example', require('./components/Example.vue'));

const app = new Vue({
    el: '#app',
    data: {
      message: 'Example'
    }
});

示例.vue
<template>
    <div class="container">
        <div class="row">
            <div class="col-md-8 col-md-offset-2">
                <div class="panel panel-default">
                    <div class="panel-heading" >{{ message }}</div>

                    <div class="panel-body">
                        I'm an example component!
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        mounted() {
            console.log('Component mounted.')
        }
    }
</script>


{{message}}
我是一个示例组件！
导出默认值{
安装的（）{
console.log（'组件已安装'）
}
}

app.blade.php
<html>
<!-- ... -->
<body>
  <div id="app">
    <example></example>
  </div>
  <script src="{{ asset('js/app.js') }}"></script>
</body>

</html>


您的Example.vue组件无权访问其父组件的属性。您需要在试图使用消息的组件的相同范围内定义消息
您可以通过在示例组件中添加消息
作为数据属性来完成此操作：
// Example.vue script
export default {
  data() {
    return {
      message: 'Example',
    }
  },
}

或者您可以将其作为道具传入：
// Example.vue script
export default {
  props: ['message'],
}

在您的情况下，您将为消息传递一个值，如下所示：
// in app.blade.php
<example message="Example"></example>

//在app.blade.php中

以下是有关的文档。
您的Example.vue组件无权访问其父组件的属性。您需要在示例组件中添加message
作为数据属性，或者将其作为父组件的道具传入。您的意思是：Vue.component（'Example'，{props:['message']}，require（'./components/Example.Vue'）？你能指定它吗？只有第一个例子有效。我可以从我的app.js发送数据吗？不可以，因为您在app.js
中没有示例组件的实例，所以您只能在那里注册它。道具作为组件标记上的属性传递。请参阅。第二个示例应该是有效的，您得到的是相同的错误还是不同的错误？不，抱歉，它有效。我认为有三个不同的例子。现在我说对了。谢谢