Vue.js添加组件操作示例

时间：2021-05-26

本文实例讲述了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程序设计有所帮助。

声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。如涉及版权问题，请提交至online#300.cn邮箱联系删除。

相关文章