编程 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 相关文章推荐

JavaScript 给汉字排序实例代码

Jun 28 Javascript

jQuery asp.net 用json格式返回自定义对象

Apr 07 Javascript

整理8个很棒的 jQuery 倒计时插件和教程

Dec 12 Javascript

jquery实现预览提交的表单代码分享

May 21 Javascript

实例分析js和C#中使用正则表达式匹配a标签

Nov 26 Javascript

AngularJS 中文API参考手册

Jul 28 Javascript

js实现右键自定义菜单

Dec 03 Javascript

Bootstrap基本组件学习笔记之分页(12)

Dec 08 Javascript

js判断是否是手机页面

Mar 17 Javascript

node.js程序作为服务并在windows下开机自启动（用forever）

Mar 29 Javascript

Angular2开发环境搭建教程之VS Code

Dec 15 Javascript

详解TypeScript中的类型保护

Apr 29 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