Vue.js添加组件操作示例

人气：441 时间：2019-04-11

这篇文章主要为大家详细介绍了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程序设计有所帮助。

本文来自：http://www.q1010.com/184/5434-0.html

注：关于Vue.js添加组件操作示例的内容就先介绍到这里，更多相关文章的可以留意四海网的其他信息。

关键词：vue.js

您可能感兴趣的文章

上一篇：vue cli 3.0 使用全过程解析

下一篇：vue中如何让子组件修改父组件数据