Vue.js添加组件操作示例

2019-11-19 13:39:18

字体：大中小

来源：转载

供稿：网友

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

上一篇：JavaScript 判断对象中是否有某属性的常用方法

下一篇：vue 项目打包通过命令修改 vue-router 模式修改 API 接口前缀