Vuejs 2向xxx.vue文件发送道具

时间:2017-04-04 04:25:12

标签: vue.js vuejs2 vue-component

通常你会像这样发送道具

Vue.component('child', {
  // camelCase in JavaScript
  props: ['myMessage'],
  template: '<span>{{ myMessage }}</span>'
})

我如何通过要求实现:

Vue.component('lw-login', require('./components/login.vue'));

Laravel Blade模板:

<lw-login
        heading="Login"
        action="{{ route('login') }}"
        email="E-mailadres"
        passwordrequest="{{ route('password.request') }}"
></lw-login>

login.vue: 见{{heading}} 我收到了这个错误:

[Vue warn]: Property or method "heading" is not defined on the instance but referenced during render. Make sure to declare reactive data properties in the data option. 

(见于C:\ Code \ cms \ resources \ assets \ js \ components \ login.vue)

<template>
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <div class="panel panel-default">
                    <div class="panel-heading">{{ heading }}</div>
                    <div class="panel-body">
                        <form class="form-horizontal" role="form" method="POST" :action="action">


                            etc .....

<script>
    export default {
        mounted() {
            props: ['heading','action','passwordrequest']
        }
    }
</script>

1 个答案:

答案 0 :(得分:0)

改变了这个:

<script>
    export default {
        mounted() {
            props: ['heading','action','passwordrequest'],
        }
    }
</script>

对此:)):

<script>
    export default {
        props: ['heading','action','passwordrequest'],
        mounted() {

        }
    }
</script>