【问题标题】：Passing Props Vue js传递道具Vue js
【发布时间】：2018-05-29 03:15:22
【问题描述】：

我正在尝试将一个道具从主 Vue 实例传递给一个组件。我正在传递两个道具，第一个有效，但第二个由于某种原因没有。

主实例

  var app7 = new Vue({
    el: '#app-7',
    template: `<div class="b">
                    <div>
                        <button class="c" v-on:click="previousDay">&lsaquo;</button>
                        <h1 >{{ this.ss }}</h1>
                        <button class="c" v-on:click="nextDay">&rsaquo;</button>
                    <div>
                    <emp-item
                    v-for="item in empList"
                    v-bind:emp="item"
                    v-bind:key="item.id">
                    v-bind:lines="lines"
                    </emps-item>
                    </div>`,
    data: function() {
    return {
    empList : l,
    lines: 0,
    day: 0
    }
// other stuff

组件

Vue.component('emp-item', {
    props: ['emp', 'lines'],
    template: `<div class="cv">
                <h6>{{emp.first_name}} {{ lines }}</h6>
                <canvas  v-on:mousedown="mouseDown" v-on:mousemove="mouseMove" v-on:mouseup="mouseUp" :id="'cv' + emp.id" class="canvas"  width="150" height="700"></canvas>

                </div>`,
    data: function() {
        return {

            rect : {},
            drag : false,
            startTime : 0,
            cv: ''

        }
    },
    watch: {
        lines: function () {
            console.log('watch: ');
        }
    },
// methods

如果 HTML 很重要

<div id="app-7">

    <app></app>

</div>

【问题讨论】：

您在绑定行之前关闭了 <emp-item> 标签 → 它只是被视为文本。（我的意思是开始标签本身，而不是你错过了结束标签）

标签： javascript vue.js vuejs2 vue-component

【解决方案1】：

在绑定第二个 prop 之前关闭组件标签。它应该是这样的：

var app7 = new Vue({
    el: '#app-7',
    template: `<div class="b">
                    <div>
                        <button class="c" v-on:click="previousDay">&lsaquo;</button>
                        <h1 >{{ this.ss }}</h1>
                        <button class="c" v-on:click="nextDay">&rsaquo;</button>
                    <div>
                    <emp-item
                    v-for="item in empList"
                    v-bind:emp="item"
                    v-bind:key="item.id"
                    v-bind:lines="lines">
                    </emps-item>
                    </div>`,
    data: function() {
        return {
            empList : l,
            lines: 0,
            day: 0
    }
})

【讨论】：