@{
ViewData["Title"] = "component test";
}
<h1>@ViewData["Title"]</h1>
<div id="app">
@*这里测试父子组件的数据传递*@
<mycom v-bind:cmovies="movies" :cmessage="message"></mycom>
@*<mycnp></mycnp>*@
</div>
<template id="cpnParent">
<div>
<h1> html 代碼的組件測試</h1>
<h1>{{title}}</h1>
<h2>当前计数 {{counter}}</h2>
<button v-on:click="increment">+</button>
<button v-on:click="decrement">-</button>
<h1>
{{cmovies}}
</h1>
<h1>
{{cmessage}}
</h1>
<firstcom></firstcom>
</div>
</template>
<template id="cpnChildren">
<div>
<h1> html 代碼的-----子組件測試</h1>
</div>
</template>
<script src="~/js/vue.js"></script>
<script>
//全局組件
//Vue.component('mycnp', {
// template:'#cpn'
//})
const app = new Vue({
el: '#app',
data: {
message: '我定义的一个消息',
movies:['黑客帝国','美丽人生','宇宙旅行']
},
components: {
mycom: { //父子组件的命名一定要弄清楚,否者会报错
template: '#cpnParent',
props:['cmovies','cmessage'],
data() {//这里是组件存放数据的方法
return {
title: 'components data test',
counter:0
}
},
methods: {
increment(){
this.counter++
},
decrement() {
this.counter--
}
},
components: {
firstcom: {
template: '#cpnChildren',
//data: function () {
// return {}
//},
}
}
}
}
})
</script>