编程 Javascript

Vue.js添加组件操作示例

Posted in Javascript onJune 13, 2018

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

Vue.js添加组件操作示例

- Author -

wensongyu

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

一个原生的用户等级的进度条

Jul 03 Javascript

caller和callee的区别介绍及演示结果

Mar 10 Javascript

JQuery 控制内容长度超出规定长度显示省略号

May 23 Javascript

用Jquery.load载入页面后样式没了页面混乱的解决方法

Oct 20 Javascript

详解JavaScript中jQuery和Ajax以及JSONP的联合使用

Aug 13 Javascript

js实现商城星星评分的效果

Dec 29 Javascript

jQuery事件委托之Safari

Jul 05 Javascript

两种JavaScript的AES加密方式（可与Java相互加解密）

Aug 02 Javascript

原生JS forEach()和map()遍历的区别、兼容写法及jQuery $.each、$.map遍历操作

Feb 27 jQuery

Node 搭建一个静态资源服务器的实现

May 20 Javascript

解决layer弹出层msg的文字不显示的问题

Sep 11 Javascript

解决layui数据表格排序图标被超出的表头挤出去的问题

Sep 19 Javascript

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

Jun 13 #Javascript

clipboard.js在移动端复制失败的解决方法

Jun 13 #Javascript

ES6与CommonJS中的模块处理的区别

Jun 13 #Javascript

浅谈webpack 构建性能优化策略小结

Jun 13 #Javascript

详解webpack运行Babel教程

Jun 13 #Javascript

Babel 入门教程学习笔记

Jun 13 #Javascript

Vue中在新窗口打开页面及Vue-router的使用

Jun 13 #Javascript