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>

效果：

Vue.js添加组件操作示例

局部注册

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

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

希望本文所述对大家vue.js程序设计有所帮助。

版权声明 1 本网站名称：偶像资源网
2 本站永久网址：https://www.ox520.com
3 本网站的文章部分内容可能来源于网络，仅供大家学习与参考，如有侵权，请联系站长 QQ593098775进行删除处理。
4 本站一切资源不代表本站立场，并不代表本站赞同其观点和对其真实性负责。
5 本站一律禁止以任何方式发布或转载任何违法的相关信息，访客发现请向站长举报
6 本站资源大多存储在云盘，如发现链接失效，请联系我们我们会第一时间更新。

THE END

Vue.js添加组件操作示例

请登录后发表评论