Vue.js添加组件操作示例
时间：2020-11-28 14:25:54 | 栏目：vue | 点击：次
本文实例讲述了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程序设计有所帮助。