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程序设计有所帮助。

违法及侵权请联系：TEL:199 1889 7713 E-MAIL:2724546146@qq.com

本站由北京市万商天勤律师事务所王兴未律师提供法律服务