[英]Passing Props Vue js
我試圖將prop從主Vue實例傳遞到組件。 我正在傳遞兩個道具,第一個起作用,但是第二個由於某種原因沒有起作用。
var app7 = new Vue({
el: '#app-7',
template: `<div class="b">
<div>
<button class="c" v-on:click="previousDay">‹</button>
<h1 >{{ this.ss }}</h1>
<button class="c" v-on:click="nextDay">›</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
<div id="app-7">
<app></app>
</div>
在綁定第二個道具之前,請先關閉它。 它看起來應該像這樣:
var app7 = new Vue({
el: '#app-7',
template: `<div class="b">
<div>
<button class="c" v-on:click="previousDay">‹</button>
<h1 >{{ this.ss }}</h1>
<button class="c" v-on:click="nextDay">›</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
}
})
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.