Vue2.0学习之详解Vue 组件及父子组件通信


Posted in Javascript onDecember 12, 2017

什么是组件?

vue中的组件其实就是页面组成的一部分,好比是电脑中的每一个元件(如硬盘,键盘,鼠标),它就是一个具有独立逻辑或界面,同时又能根据规定的接口规则进行相互融合,变成一个完整的应用。

页面就是由一个个类似这样的部分组成的,比如导航,列表,弹窗,下拉列表等。页面只不过是这些组件的容器,组件自由组合形成功能完整的界面,当不需要某个组件,或者想要替换某个组件时,可以随时进行替换和删除,而不影响整个应用的运行。

前端组件化的核心思路就是将一个巨大复杂的东西拆分成颗粒度合理的小东西。

使用组件的好处?

1、提高开发效率
2、方便重复使用
3、简化调试步骤
4、提升整个项目的可维护性
5、便于协同开发

vue中的组件

vue中的组件是一个自定义标签,vue.js的编译器为它添加特殊功能
vue中的组件也可以扩展原生的html元素,封装可重用的代码

组件的基本组成:样式结构,行为逻辑,数据

注册组件

全局注册

可以在任何模板中使用,使用之前要先注册

语法:使用Vue.compontent(组件名,选项对象)

组件名命名约定:驼峰,烤串

在html中使用组件:使用烤串命名法

例如,注册Vue.compontent('my-compontent',{}),使用的时候<my-compontent></my-compontent>

<div id="app">
    <h2>自定义下拉框</h2>
    <cus-list></cus-list>
    <cus-list></cus-list>
</div>
<script type="text/javascript" src='https://i0.jrjimg.cn/zqt-red-1000/focus/focus2017YMZ/teamFrighting/js/vue.min.js'></script>
<script type="text/javascript">
  // 全局注册组件
  Vue.component('cus-list',{
    data(){
      return {
        
      }
    },
    template:`
      <section>
        <div>
          <div>
            <input type="text">
            <input type="button" name="" value="">
            <span></span>
          </div>
        </div>
      </section>
    `
  })
  new Vue({
    el:"#app",
    data:{
      
    }
  })
</script>

使用的时候,只要在页面上召唤这个组件就可使用,并且可以复用。

Vue2.0学习之详解Vue 组件及父子组件通信 

组件.png

局部注册

在组件实例中通过选项对象注册,只在所注册的作用域中使用

<div id="app">
    <h2>自定义下拉框</h2>
    <cus-list></cus-list>
    <cus-list></cus-list>
</div>
<script type="text/javascript" src='https://i0.jrjimg.cn/zqt-red-1000/focus/focus2017YMZ/teamFrighting/js/vue.min.js'></script>
<script>
  new Vue({
    el:"#app",
    components:{
      'cus-list':{
        template:`
          <section>
            <div>
              <div>
                <input type="text">
                <input type="button" name="" value="">
                <span></span>
              </div>
            </div>
          </section>
        `
      }
    },
    data:{
      
    }
  })
</script>

局部注册的组件,只有在当前实例的作用域中才可以使用,在作用域中也可以复用,效果如下。

Vue2.0学习之详解Vue 组件及父子组件通信 

组件.png

父子组件间通信

父组件给子组件通信

父组件===》子组件(用props)

组件实例的作用域是孤立的,不能再子组件直接用父组件的数据。

可以在组件上使用自定义属性绑定数据,在组件中组要显示的用props生命自定义属性名。

也就是记住一句话,父组件给子组件传值得时候,就是调用组件时给组件添加 一个属性,然后在组件内用props接收即可,组件内根据属性名即可使用。

<div id="app">
  <h2>自定义下拉框</h2>
  <cus-list btn-value="查询"></cus-list>
  <cus-list btn-value="搜索"></cus-list>
</div>
<script type="text/javascript" src='https://i0.jrjimg.cn/zqt-red-1000/focus/focus2017YMZ/teamFrighting/js/vue.min.js'></script>
<script>
  Vue.component('cus-list',{
    data(){

    },
    props:['btnValue'],
    template:`
      <section>
        <div>
          <div>
            <input type="text">
            <input type="button" name="" :value="btnValue">
            <span></span>
          </div>
        </div>
      </section>
    `
  })
  new Vue({
    el:"#app",
    data:{
      
    }
  })
</script>

页面效果

Vue2.0学习之详解Vue 组件及父子组件通信 

props传值.png

子组件给父组件通信

子组件===》父组件

需要用到自定义时间,父组件用$on监听自定义事件,$emit触发父组件所关心的自定义事件。

1、在子组件中定义事件内容<li v-for="item of list" @click="clickLi(item)">{{item}}</li>

2、父组件中v-on自定义事件进行接收v-on:receive="changeValue"

3、在触发子组件事件的时候,$emit 通知父组件 this.$emit("receive",item);

4、父组件根据自定义事件进行相应反馈changeValue:function(value){this.val = value;}

看如下案例,点击input的时候,出现下拉列表框,选中相应的列表,列表内容出现在input框中。

<div id="app">
    <h2>自定义下拉框</h2>
    <cus-list select-Value="搜索" v-bind:list="list1" >
    </cus-list>
  </div>
  <script type="text/javascript" src='https://i0.jrjimg.cn/zqt-red-1000/focus/focus2017YMZ/teamFrighting/js/vue.min.js'></script>
  <script type="text/javascript">
  // 全局注册组件
  Vue.component('cus-list',{
    data(){
      return {
        selectShow:false,
        val:''
      }
    },
    props:['selectValue','list'],
    template:`
      <section>
        <div>
          <div>
            <input type="text" @click="selectShow = !selectShow" :value="val">
            <input type="button" name="" :value="selectValue">
          </div>
          <list-li :list="list" v-show="selectShow" v-on:receive="changeValue"></list-li>
        </div>
      </section>
    `,
    methods:{
      changeValue:function(value){
        this.val = value;
      }
    }
  })
  Vue.component('list-li',{
    props:['list'],
    template:`
        <ul>
          <li v-for="item of list" @click="clickLi(item)">{{item}}</li>
        </ul>
    `,
    methods:{
      clickLi:function(item){
        this.$emit("receive",item);
      }
    }
  })
  new Vue({
    el:"#app",
    data:{
      list1:['宋仲基','余文乐','鹿晗','陈小春','黄晓明','易烊千玺']
    }
  })
  </script>

组件最基本的应用就是如此,深入的应用,就会发现很多刚好玩的东西。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js动态加载以及确定加载完成的代码
Jul 31 Javascript
javascript中日期函数new Date()的浏览器兼容性问题
Sep 05 Javascript
Bootstrap carousel轮转图的使用实例详解
May 17 Javascript
vue使用xe-utils函数库的具体方法
Mar 06 Javascript
Vue.js实现的表格增加删除demo示例
May 22 Javascript
浅析vue给不同环境配置不同打包命令
Aug 17 Javascript
JavaScript基于数组实现的栈与队列操作示例
Dec 22 Javascript
jQuery实现根据身份证号获取生日、年龄、性别等信息的方法
Jan 09 jQuery
简单了解node npm cnpm的具体使用方法
Feb 27 Javascript
微信公众号生成新浪短网址的实现(快速生成)
Aug 18 Javascript
浅谈layui里的上传控件问题
Sep 26 Javascript
vue-cli3项目配置eslint代码规范的完整步骤
Sep 10 Javascript
JS中精巧的自动柯里化实现方法
Dec 12 #Javascript
Vue2.0 slot分发内容与props验证的方法
Dec 12 #Javascript
分析JS中this引发的bug
Dec 12 #Javascript
微信小程序使用progress组件实现显示进度功能【附源码下载】
Dec 12 #Javascript
基于input动态模糊查询的实现方法
Dec 12 #Javascript
详解vue.js之props传递参数
Dec 12 #Javascript
react实现菜单权限控制的方法
Dec 11 #Javascript
You might like
php计算两个坐标(经度,纬度)之间距离的方法
2015/04/17 PHP
浅谈php+phpStorm+xdebug配置方法
2015/09/17 PHP
php编译安装php-amq扩展简明教程
2016/06/25 PHP
setTimeout和setInterval的浏览器兼容性分析
2007/02/27 Javascript
学习YUI.Ext基础第一天
2007/03/10 Javascript
Dom加载让图片加载完再执行的脚本代码
2008/05/15 Javascript
js利用Array.splice实现Array的insert/remove
2009/01/13 Javascript
jQuery 白痴级入门教程
2009/11/11 Javascript
有关javascript的性能优化 (repaint和reflow)
2013/04/12 Javascript
Extjs4中Form的使用之本地hiddenfield
2013/11/26 Javascript
浅析JavaScript基本类型与引用类型
2014/05/28 Javascript
node.js中的console.dir方法使用说明
2014/12/10 Javascript
关于JavaScript的变量的数据类型的判断方法
2015/08/14 Javascript
javascript电商网站抢购倒计时效果实现
2015/11/19 Javascript
JavaScript lodash常见用法系列小结
2016/08/24 Javascript
javascript设计模式之模块模式学习笔记
2017/02/15 Javascript
jQuery插件FusionCharts绘制的3D双柱状图效果示例【附demo源码】
2017/04/20 jQuery
老生常谈Bootstrap媒体对象
2017/07/06 Javascript
深入理解React高阶组件
2017/09/28 Javascript
Angular 容器部署的方法
2018/04/17 Javascript
Vue多系统切换实现方案
2018/06/05 Javascript
JavaScript实现文件下载并重命名代码实例
2019/12/12 Javascript
[01:16:12]完美世界DOTA2联赛PWL S2 FTD vs Inki 第一场 11.21
2020/11/23 DOTA
Python实现豆瓣图片下载的方法
2015/05/25 Python
python时间日期函数与利用pandas进行时间序列处理详解
2018/03/13 Python
Python常用模块之requests模块用法分析
2019/05/15 Python
Python如何读取文件中图片格式
2020/01/13 Python
jupyter notebook 使用过程中python莫名崩溃的原因及解决方式
2020/04/10 Python
python 动态绘制爱心的示例
2020/09/27 Python
css3 pointer-events 介绍详解
2017/09/18 HTML / CSS
广告学专业毕业生自荐信
2014/05/28 职场文书
护理学院专科毕业生求职信
2014/06/28 职场文书
办公室主任四风问题对照检查材料思想汇报
2014/09/28 职场文书
2015年食品安全工作总结
2015/05/15 职场文书
孝女彩金观后感
2015/06/10 职场文书
2016党员三严三实心得体会
2016/01/15 职场文书