本文实例讲述了Vue.js添加组件操作。分享给大家供大家参考，具体如下：
<!DOCTYPE HTML>
<html>
<head>
<title>vue.js hello world</title>
<script src="../vue.js"></script>
</head>
<body>
<div id="example">
<my-component v-on:click="cao"></my-component>
</div>
<script>
// 定义
var MyComponent = Vue.extend({
template: '<div>A custom component!</div>'
});
// 注册
Vue.component('my-component', MyComponent);
// 创建根实例
new Vue({
el: '#example',
methods:{
cao:function(event){
alert(event.target.tagName);
}
}
});
</script>
</body>
</html>效果：
局部注册
不需要全局注册每个组件。可以让组件只能用在其它组件内，用实例选项 components 注册：
var Child = Vue.extend({ /* ... */ })
var Parent = Vue.extend({
template: '...',
components: {
// <my-component> 只能用在父组件模板内
'my-component': Child
}
})
希望本文所述对大家vue.js程序设计有所帮助。
声明：本网页内容旨在传播知识，若有侵权等问题请及时与本网联系，我们将在第一时间删除处理。TEL:177 7030 7066 E-MAIL:11247931@qq.com
Copyright © 2019-2025 51dongshi.com 版权所有
违法及侵权请联系：TEL:177 7030 7066 E-MAIL:11247931@qq.com 本站由北京市万商天勤律师事务所王兴未律师提供法律服务
