Vue.js添加组件操作示例
编程学习 2021-07-04 16:45www.dzhlxh.cn编程入门
这篇文章主要介绍了Vue.js添加组件操作,结合实例形式分析了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程序设计有所帮助。