vue.js 组件
组件（Component）是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素，封装可重用的代码。
全局组件：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="../diyitain/js/vue.js"></script>
</head>
<body>
<div class="box">
<two></two>
</div>
<script>
Vue.component('two',{// 注册
template: `<div>
<h1>{{msg}}</h1>
<button v-on:click='qq'>按铥</button>
</div>
`,
data:function(){
return{
msg:'qwertyuiop'
}
},
methods:{
qq:function(){
alert('qw')
}
}
})
new Vue({
el: '.box'
})
</script>
</body>
</html>
局部组件：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="../diyitain/js/vue.js"></script>
<style>
</style>
</head>
<body>
<div class="box">
<two></two>
</div>
<script>
// Vue.component('two',{
// template:`<ul><li>1</li><li>2</li><li>3</li><li>4</li></ul>`
// })
new Vue({
el:'.box',
components:{
'two':{
template:`<ul><li>1</li><li>2</li><li>3</li><li>4</li></ul>`
}
}
})
</script>
</body>
</html>
父传子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<script src="../diyitain/js/vue.js"></script>
</head>
<body>
<div id='app'>
<my-father></my-father>
</div>
<script>
Vue.component('my-father', {
template: `
<div>
<input type="text" v-model="mas">
<button v-on:click="tian">点击</button>
<my-chlid v-bind:lis="list"></my-chlid>
</div>
`
, data: function () {
return {
list: ['水果', '吃饭']
, mas: ''
}
}
, methods: {
tian: function () {
this.list.push(this.mas);
this.mas = ''
}
}
})
Vue.component('my-chlid', {
props: ['lis']
, template: `
<ul>
<li v-for="(val,index) in lis">{{val}}<button v-on:click="alt(index)">删除</button></li>
</ul>
`
, methods: {
alt: function (ind) {
this.lis.splice(ind, 1)
}
}
})
new Vue({
el: '#app'
})
</script>
</body>
</html>
子传父
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="../diyitain/js/vue.js"></script>
</head>
<body>
<div class="box">
<two></two>
</div>
<script>
Vue.component('two',{
template:`<div><p>{{list}}</p><there @qq='btn1'></there></div>`,
data:function(){
return{
list:''
}
},
methods:{
btn1:function(txt){
this.list=txt
}
}
})
Vue.component('there',{
template:`<div><input v-model='lists'><button @click='btn'>点击</button></div>`,
data:function(){
return{
lists:''
}
},
methods:{
btn:function(){
this.$emit('qq',this.lists)// this.$emit('自定义事件',参数)
}
}
})
new Vue({
el:'.box'
})
</script>
</body>
</html>
网友评论