Vue.js添加组件操作示例
程序员文章站
2022-08-28 21:35:35
本文实例讲述了vue.js添加组件操作。分享给大家供大家参考，具体如下：
本文实例讲述了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程序设计有所帮助。