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 相关文章推荐
jQuery对表单元素的取值和赋值操作代码
May 19 Javascript
js模拟滚动条(横向竖向)
Feb 22 Javascript
js取float型小数点后两位数的方法
Jan 18 Javascript
Web表单提交之disabled问题js解决方法
Jan 13 Javascript
js实现文本框中输入文字页面中div层同步获取文本框内容的方法
Mar 03 Javascript
JS数组array元素的添加和删除方法代码实例
Jun 01 Javascript
javascript实现禁止鼠标滚轮事件
Jul 24 Javascript
jQuery多文件异步上传带进度条实例代码
Aug 16 Javascript
分分钟玩转Vue.js组件
Oct 25 Javascript
Bootstrap Table 搜索框和查询功能
Nov 30 Javascript
你或许不知道的一些npm实用技巧
Jul 04 Javascript
微信小程序实现一张或多张图片上传(云开发)
Sep 25 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
mysql 搜索之简单应用
2007/04/27 PHP
php 全局变量范围分析
2009/08/07 PHP
解析php中const与define的应用区别
2013/06/18 PHP
preg_match_all使用心得分享
2014/01/31 PHP
记录几个javascript有关的小细节
2007/04/02 Javascript
JS window.opener返回父页面的应用
2009/10/24 Javascript
js 绑定带参数的事件以及手动触发事件
2010/04/27 Javascript
在jQuery 1.5中使用deferred对象的代码(翻译)
2011/03/10 Javascript
js中关于String对象的replace使用详解
2011/05/24 Javascript
jquery 插件学习(六)
2012/08/06 Javascript
jQuery教程 $()包装函数来实现数组元素分页效果
2013/08/13 Javascript
使用GruntJS构建Web程序之安装篇
2014/06/04 Javascript
js 左右悬浮对联广告特效代码
2014/12/12 Javascript
js实现鼠标经过表格行变色的方法
2015/05/12 Javascript
使用jQuery或者原生js实现鼠标滚动加载页面新数据
2016/03/06 Javascript
js根据手机客户端浏览器类型,判断跳转官网/手机网站多个实例代码
2016/04/30 Javascript
AngularJS基础 ng-click 指令示例代码
2016/08/01 Javascript
在web中js实现类似excel的表格控件
2016/09/01 Javascript
[Bootstrap-插件使用]Jcrop+fileinput组合实现头像上传功能实例代码
2016/12/20 Javascript
Vue cli 引入第三方JS和CSS的常用方法分享
2018/01/20 Javascript
vue 的 solt 子组件过滤过程解析
2019/09/07 Javascript
JavaScript语法约定和程序调试原理解析
2020/11/03 Javascript
urllib2自定义opener详解
2014/02/07 Python
使用rst2pdf实现将sphinx生成PDF
2016/06/07 Python
详解如何用OpenCV + Python 实现人脸识别
2017/10/20 Python
Django中使用celery完成异步任务的示例代码
2018/01/23 Python
python读取指定字节长度的文本方法
2019/08/27 Python
pytorch载入预训练模型后,实现训练指定层
2020/01/06 Python
浅谈python之自动化运维(Paramiko)
2020/01/31 Python
英国护肤品购物网站:Beauty Expert
2016/08/19 全球购物
德国EGOIST网店:销售畅销的设计师品牌
2017/04/18 全球购物
应届生英语教师求职信
2013/11/05 职场文书
爱护草坪标语
2014/06/24 职场文书
学生会竞选演讲稿怎么写
2014/08/26 职场文书
公共艺术专业自荐信
2014/09/01 职场文书
pycharm 如何查看某一函数源码的快捷键
2021/05/12 Python