使用Vue.component创建组件及注意事项
2020-11-12 本文已影响0人
莫伊剑客
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>组件化</title>
</head>
<body>
<div id="app">
<div>
<add-couse v-model='couse' @input='onInput' @add-couse='addCouse' ></add-couse>
<couses-list :couses='list'></couses-list>
</div>
</div>
<script src="./js/vue.js"></script>
<script>
// add-couse
Vue.component('add-couse', {
props: ['value'],
template: `
<div>
<input type='text' :value='value' @input='onInput' @keyup.enter='addCouse'/>
<button @click='addCouse'>add</button>
</div>
`,
methods: {
addCouse() {
this.$emit('add-couse')
},
onInput(e) {
this.$emit('input', e.target.value)
}
}
})
// couse-list
Vue.component('couses-list', {
props: {
couses: {
type: Array,
default: []
}
},
created() {
console.log(this.couses)
},
template: `<div>
<p v-for='(em,index) in couses' :key='index'>{{em}}</p>
</div>`
})
const app = new Vue({
el: '#app',
data() {
return {
couse: '000',
list: ['1', '2',6]
}
},
watch: {
couses(newValue, oldValue) {
console.log(newValue)
}
},
methods: {
onInput(val) {
this.couse = val
},
addCouse() {
this.list.push(this.couse)
this.couse = ''
}
},
updated () {
console.log(this.list)
},
})
// console.log(app, app.title)
// console.log(app.$options.render)
</script>
</body>
</html>
使用url引入vue库文件使用vue时，Vue.component创建的组件在应用时必须使用闭合标签，否则只能显示其中一会组件
<add-couse v-model='couse' @input='onInput' @add-couse='addCouse' ></add-couse>
<couses-list :couses='list'></couses-list>
