vue 怎么创建组件及组件使用方法


Posted in Javascript onJuly 27, 2017

什么是组件?

组件 (Component) 是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素,封装可重用的代码。在较高层面上,组件是自定义元素,Vue.js 的编译器为它添加特殊功能。在有些情况下,组件也可以是原生 HTML 元素的形式,以 is 特性扩展。

我知道vue中核心就是组件,但是组件是什么呢?组件有什么用呢?

这里来说说怎么用组件?怎么样创建自己的组件?:

1)创建自己的组件

通过vue.extend("template");通过vue构造器去拓展一个模板,然后注册,最后使用。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>进一步了解component的话法糖</title>
    <script src="../vue.js"></script>
  </head>
  <body>
  
    <div>这是一个全局注册的</div>
    <div id="app">
      <parent></parent>
    </div>
  </body>
</html>
<script>
  var child= Vue.extend({template:'<p>this is child component</p>'});
  //Vue.component("组件名",{});在注册之前会自动创建(调用vue.extend()方法 )
  //这是一个全局注册(兼创建与注册)
  Vue.component("parent",{//有时候我们可以省略,extend.
    template:'<div>this is parent component ------ {{text}} <child-component></child-component> </div>',//局部使用
    components:{
      "child-component":child,//局部注册
    },
    //data:function(){}
    data(){
      return {text:'哈哈哈,我是组件内部的text'}
    },
  });
  var vm= new Vue({
    el:'#app',
    data:{},
  });

进阶一下:(组件内部在套组件,(components下面的components))

通过下面的例子,我就想说明一点,组件是vue构造器的拓展,所以组件可能拥有构造器的几乎所有属性(在写这篇博客前,我们没有听到这个说法,所以可能是错的,不要信)

<body>
  <div>这是一个局部注册</div>
  <div id="app1">
      <div><button v-on:click=get>这里触发get方法</button></div>
    <parent-components></parent-components>
  </div>
</body> 
<script>  
//  var child=Vue.extend({template:"<span> ------child element------</span>"});
  var vp=new Vue({
    el:'#app1',
    data:{},
    methods:{
      get:function(){alert("这是构造器中get(全局)");}
    },
    components:{
      "parent-components":{
        template:"<div>---------<span>  parent components</span><p><button v-on:click=get>点击触发parent的get</button></p> <div><child-component></child-component></div>--------</div>",
        components:{
          //局部注册再一次局部注册
          "child-component":{
            template:"<span> ------child <button v-on:click=get>点击触发child中的get方法</button>element------</span>",
            methods:{
              get:function(){
                alert("这是局部注册child-component组件中get");
              }
            }
          }
        },
        methods:{
          get:function(){
            alert("这是蝉联注册parent-components里面的方法");
          }
        },
      },
    },  
  });
</script>

你知道吗?一个components中可以定义多个组件:

将html,写入components是不是觉得很low呢?当template的内容太多了,是不是不堪入目呢?那我们来使用一下vue组件的语法糖吧(不知道为啥叫这个名)

值得提醒你的事:组件中的data属性要定义成一个函数,返回一个对象,

<script type="text/x-template" id="myComponent">
    <div>  
     <span>{{msg}}</span>
    </div>
  </script>
  <template id='myCom'>
   <span>{{msg}}</span>
  </template>
  <div id="app">
    <parent-component-script></parent-component-script>
    <parent-component-tem></parent-component-tem>
   </div>
var vm=new Vue({
    el:"#app",
    data:{},
    components:{
      "parent-component-script":{
          template:'#myComponent',
          data(){return{msg:'这里是script'};},
      },
      "parent-component-tem":{
        template:'#myCom',
        data(){return{msg:'这里是template'} }
      },
    },
  });

你也可以更狠一点:的创建方式

值得注意的是:组件中的props中属性值,定义时是驼峰,使用时就要变为中划线

<div id="app">
  <son :son-counter="counter"></son>
  <p>parent:<input type="text" v-model="counter"/></p>
</div>  
const son={
    template:`<div>son:<input v-model="sonCounter" /></div>`,
    props:{sonCounter:Number},
 };
var app=new Vue({
   el:'#app',
   data:{
     counter:0,
   },
   components:{
     son
   }
 });

 最后一个提醒:组件的创建要在,vue实例化之前。

总结

以上所述是小编给大家介绍的vue 怎么创建组件及组件使用方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
jquery里的each使用方法详解
Dec 22 Javascript
jQuery Tools tab(幻灯片)
Jul 14 Javascript
js实现仿Windows风格选项卡和按钮效果实例
May 13 Javascript
window.onload使用指南
Sep 13 Javascript
JS实现动态生成表格并提交表格数据向后端
Nov 25 Javascript
vue项目中axios使用详解
Feb 07 Javascript
node.js中TCP Socket多进程间的消息推送示例详解
Jul 10 Javascript
详解如何给React-Router添加路由页面切换时的过渡动画
Apr 25 Javascript
js页面加载后执行的几种方式小结
Jan 30 Javascript
微信小程序实现同时上传多张图片
Feb 03 Javascript
原生js实现俄罗斯方块
Oct 20 Javascript
js canvas实现五子棋小游戏
Jan 22 Javascript
详解Angular-cli生成组件修改css成less或sass的实例
Jul 27 #Javascript
Vue中如何实现轮播图的示例代码
Jul 27 #Javascript
基于构造函数的五种继承方法小结
Jul 27 #Javascript
vue中各组件之间传递数据的方法示例
Jul 27 #Javascript
微信小程序 页面跳转传值实现代码
Jul 27 #Javascript
JS实现按钮控制计时开始和停止功能
Jul 27 #Javascript
关于JavaScript中forEach和each用法浅析
Jul 27 #Javascript
You might like
php checkbox 取值详细说明
2010/08/19 PHP
采用memcache在web集群中实现session的同步会话
2014/07/05 PHP
php通过function_exists检测函数是否存在的方法
2015/03/18 PHP
浅析php设计模式之数据对象映射模式
2016/03/03 PHP
ThinkPHP框架实现的MySQL数据库备份功能示例
2018/05/24 PHP
dwr spring的集成实现代码
2009/03/22 Javascript
JS将表单导出成EXCEL的实例代码
2013/11/11 Javascript
JavaScript获取客户端计算机硬件及系统等信息的方法
2014/01/02 Javascript
Jquery 在页面加载后执行的几种方式
2014/03/14 Javascript
深入分析原生JavaScript事件
2014/12/29 Javascript
js 动态生成html 触发事件传参字符转义的实例
2017/02/14 Javascript
从零开始学习Node.js系列教程四:多页面实现的数学运算示例
2017/04/13 Javascript
BootStrap daterangepicker 双日历控件
2017/06/02 Javascript
vue-cli3.0 特性解读
2018/04/22 Javascript
JS实现的贪吃蛇游戏完整实例
2019/01/18 Javascript
[04:02]2014DOTA2国际邀请赛 BBC每日综述中国战队将再度登顶
2014/07/21 DOTA
python实现简单爬虫功能的示例
2016/10/24 Python
请不要重复犯我在学习Python和Linux系统上的错误
2016/12/12 Python
python导入时小括号大作用
2017/01/10 Python
pycharm下打开、执行并调试scrapy爬虫程序的方法
2017/11/29 Python
使用Python获取网段IP个数以及地址清单的方法
2018/11/01 Python
Django中的session用法详解
2020/03/09 Python
python 实现控制鼠标键盘
2020/11/27 Python
vue.js刷新当前页面的实例讲解
2020/12/29 Python
HTML5中实现拖放效果无须借助javascript
2012/12/26 HTML / CSS
俄罗斯游戏商店:Buka
2020/03/01 全球购物
工商管理本科毕业生求职信范文
2013/10/05 职场文书
纺织工程专业个人求职信范文
2014/01/27 职场文书
一年级语文教学反思
2014/02/13 职场文书
关于青春的演讲稿三分钟
2014/08/22 职场文书
家庭贫困证明范本(经典版)
2014/09/22 职场文书
三严三实学习心得体会
2014/10/13 职场文书
毕业论文致谢词
2015/05/14 职场文书
无犯罪记录证明样本
2015/06/16 职场文书
就业证明函
2015/06/17 职场文书
Python time库的时间时钟处理
2021/05/02 Python