编程 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中使用正则匹配多条，且获取每条中的分组数据

Nov 30 Javascript

jQuery 选择器项目实例分析及实现代码

Dec 28 Javascript

jquery和雅虎的yql服务实现天气预报服务示例

Feb 08 Javascript

JavaScript怎么判断图片是否加载完成以便获取其尺寸

May 08 Javascript

如何编写高质量JS代码

Dec 28 Javascript

jQuery使用append在html元素后同时添加多项内容的方法

Mar 26 Javascript

微信企业号开发之微信考勤Cookies的使用

Sep 11 Javascript

JavaScript Math 对象常用方法总结

Apr 28 Javascript

基于jquery实现弹幕效果

Sep 29 Javascript

JS只能输入正整数的简单实例

Oct 07 Javascript

jQuery Easyui加载表格出错时在表格中间显示自定义的提示内容

Dec 08 Javascript

three.js实现围绕某物体旋转

Jan 25 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