Vue.js添加组件操作示例
wensongyu 人气:0本文实例讲述了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程序设计有所帮助。
加载全部内容