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 排序输出实现table行号自增前端动态生成的tr
Aug 13 Javascript
javascript中new关键字详解
Dec 14 Javascript
Bootstrap组件(一)之菜单
May 11 Javascript
js输出数据精确到小数点后n位代码
Jul 02 Javascript
简单实现node.js图片上传
Dec 18 Javascript
jQuery弹出层插件popShow用法示例
Jan 23 Javascript
JS与HTML结合实现流程进度展示条思路详解
Sep 03 Javascript
Angular浏览器插件Batarang介绍及使用
Feb 07 Javascript
echarts同一页面中四个图表切换的js数据交互方法示例
Jul 03 Javascript
vueScroll实现移动端下拉刷新、上拉加载
Mar 22 Javascript
vue+vant实现商品列表批量倒计时功能
Jan 13 Javascript
解决Antd Table表头加Icon和气泡提示的坑
Nov 17 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
支持php4、php5的mysql数据库操作类
2008/01/10 PHP
完美的2个php检测字符串是否是utf-8编码函数分享
2014/07/28 PHP
PHP操作MySQL事务实例
2014/11/05 PHP
Vagrant(WSL)+PHPStorm+Xdebu 断点调试环境搭建
2019/12/13 PHP
基于jquery的loading效果实现代码
2010/11/05 Javascript
jquery随机展示头像代码
2011/12/21 Javascript
document.documentElement的一些使用技巧
2013/04/18 Javascript
javascript将浮点数转换成整数的三个方法
2014/06/23 Javascript
jQuery对象与DOM对象转换方法详解
2016/05/10 Javascript
jQuery实现div横向拖拽排序的简单实例
2016/07/13 Javascript
Angular懒加载机制刷新后无法回退的快速解决方法
2016/08/30 Javascript
什么是JavaScript中的结果值?
2016/10/08 Javascript
基于jQuery实现火焰灯效果导航菜单
2017/01/04 Javascript
对VUE中的对象添加属性
2018/09/18 Javascript
vue 框架下自定义滚动条(easyscroll)实现方法
2019/08/29 Javascript
图解NodeJS实现登录注册功能
2019/09/16 NodeJs
详解Vue3 Composition API中的提取和重用逻辑
2020/04/29 Javascript
python递归计算N!的方法
2015/05/05 Python
Python中pygame安装方法图文详解
2015/11/11 Python
Python使用Matplotlib实现Logos设计代码
2017/12/25 Python
Python简单基础小程序的实例代码
2019/04/28 Python
Python3的unicode编码转换成中文的问题及解决方案
2019/12/10 Python
python 实现仿微信聊天时间格式化显示的代码
2020/04/17 Python
利用Python优雅的登录校园网
2020/10/21 Python
Kathmandu澳洲户外商店:新西兰户外运动品牌
2017/11/12 全球购物
加拿大休闲和工业服装和鞋类零售商:L’Équipeur
2018/01/12 全球购物
意大利买卖二手奢侈品网站:LAMPOO
2020/06/03 全球购物
护士毕业实习感言
2014/03/05 职场文书
2014应届本科生自我评价
2014/09/13 职场文书
基层党组织建设整改方案
2014/09/16 职场文书
工作所在部门证明
2014/09/21 职场文书
工作作风整顿个人剖析材料
2014/10/11 职场文书
2014年会计个人工作总结
2014/11/24 职场文书
名人传读书笔记
2015/06/26 职场文书
职业生涯规划书之大学四年
2019/08/07 职场文书
如何利用Python实现一个论文降重工具
2021/07/09 Python