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

jQuery ajax cache缓存问题

Jul 01 Javascript

jQuery的内容过滤选择器学习教程

Apr 18 Javascript

js判断手机浏览器操作系统和微信浏览器的方法

Apr 30 Javascript

bootstrap提示标签、提示框实现代码

Dec 28 Javascript

百度地图API之百度地图退拽标记点获取经纬度的实现代码

Jan 12 Javascript

Bootstrap中glyphicons-halflings-regular.woff字体报404错notfound的解决方法

Jan 19 Javascript

JS中input表单隐藏域及其使用方法

Feb 13 Javascript

Jquery-data的三种用法

Apr 18 jQuery

Vue路由切换时的左滑和右滑效果示例

May 29 Javascript

react 父子组件之间通讯props

Sep 08 Javascript

详解ES6 系列之异步处理实战

Oct 26 Javascript

微信小程序canvas动态时钟

Oct 22 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