您当前的位置： 首页 > 学无止境 > JS经典实例 网站首页JS经典实例
全局组件的事件
发布时间：2020-02-09 17:48:40编辑：雪饮阅读（）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style></style>
</head>
<body>
<div id="app"></div>
<script type="text/javascript" src="./node_modules/vue/dist/vue.js"></script>
<script type="text/javascript">
// 全局组件
Vue.component('Vbtn', {
template: `
<button><slot></slot></button>
`
});
var Vcontent = {
//调用的全局组件Vbtn则不能直接click而是click.native
template: `
<div class='content'>我是内容组件
<Vbtn @click.native = 'add'>删除</Vbtn>
</div>
`,
methods:{
add(){
alert(1);
}
}
}
var Vaside = {
template: `
<div class='aside'>我是侧边栏组件</div>
`
};
var Vheader = {
template: `
<div class='head'>我是头部组件</div>
`
};
var App = {
template: `
<div class='main'>
<Vheader/>
<div class = 'main2'>
<Vaside />
<Vcontent/>
</div>
</div>
`,
data() {
return {}
},
components: {Vheader, Vaside, Vcontent}
};
new Vue({
el: '#app',
template: `<App></App>`,
data() {
return {}
},
components: {App}
});
</script>
</body>
</html>
关键字词：vue,全局组件,事件,native
上一篇：多插槽及填充
下一篇：过滤器(filters)