Vue.js添加组件操作示例

<!DOCTYPE HTML> <html> <head> <title>vue.js hello world</title> <script src="https://www.jb51.net/vue.js"></script> </head> <body> <div> <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>

效果:

Vue.js添加组件操作示例

局部注册

不需要全局注册每个组件。可以让组件只能用在其它组件内,用实例选项 components 注册:

var Child = Vue.extend({ /* ... */ }) var Parent = Vue.extend({ template: '...', components: { // <my-component> 只能用在父组件模板内 'my-component': Child } })

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:http://www.heiqu.com/4d6528074175505720867676923822f8.html