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实现点击标题输入详细信息
Apr 16 Javascript
javascript数组快速打乱重排的方法
Jan 02 Javascript
禁止iframe页面的所有js脚本如alert及弹出窗口等
Sep 03 Javascript
JS实现字符串转日期并比较大小实例分析
Dec 09 Javascript
解析Node.js异常处理中domain模块的使用方法
Feb 16 Javascript
JavaScript入门系列之知识点总结
Mar 24 Javascript
js实现canvas图片与img图片的相互转换的示例
Aug 31 Javascript
layui问题之渲染数据表格时,仅出现10条数据的解决方法
Sep 12 Javascript
javascript实现点击星星小游戏
Dec 24 Javascript
node创建Vue项目步骤详解
Mar 06 Javascript
javascript实现前端input密码输入强度验证
Jun 24 Javascript
js实现抽奖功能
Nov 24 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 stream_context_create()作用和用法分析
2011/03/29 PHP
利用PHP将部分内容用星号替换
2020/04/21 PHP
php usort 使用用户自定义的比较函数对二维数组中的值进行排序
2017/05/02 PHP
php学习笔记之mb_strstr的基本使用
2018/02/03 PHP
thinkPHP5框架中widget的功能与用法详解
2018/06/11 PHP
自动生成文章摘要的代码[JavaScript 版本]
2007/03/20 Javascript
asp 取文本框名称代码
2008/12/02 Javascript
禁用JavaScript控制台调试的方法
2014/03/07 Javascript
jquery对table中各数据的增加、保存、删除操作示例
2014/05/14 Javascript
Angular用来控制元素的展示与否的原生指令介绍
2015/01/07 Javascript
JavaScript通过prototype给对象定义属性用法实例
2015/03/23 Javascript
JQuery使用$.ajax和checkbox实现下次不在通知功能
2015/04/16 Javascript
JavaScript获取浏览器信息的方法
2015/11/20 Javascript
vue中如何实现变量和字符串拼接
2017/06/19 Javascript
bootstrap table表格客户端分页实例
2017/08/07 Javascript
在Vue组件化中利用axios处理ajax请求的使用方法
2017/08/25 Javascript
JS小球抛物线轨迹运动的两种实现方法详解
2017/12/20 Javascript
基于openlayers4实现点的扩散效果
2020/08/17 Javascript
vue路由中前进后退的一些事儿
2019/05/18 Javascript
Python列表(list)常用操作方法小结
2015/02/02 Python
python实现windows下文件备份脚本
2018/05/27 Python
2019 Python最新面试题及答案16道题
2019/04/11 Python
python django生成迁移文件的实例
2019/08/31 Python
Python 项目转化为so文件实例
2019/12/23 Python
基于python实现对文件进行切分行
2020/04/26 Python
如何用Matplotlib 画三维图的示例代码
2020/07/28 Python
Python 连接 MySQL 的几种方法
2020/09/09 Python
python gui开发——制作抖音无水印视频下载工具(附源码)
2021/02/07 Python
波兰在线香水店:Perfumy.pl
2019/08/12 全球购物
中学门卫岗位职责
2013/12/26 职场文书
英语感恩演讲稿
2014/01/14 职场文书
联谊活动策划书
2014/01/26 职场文书
社会学专业求职信
2014/07/17 职场文书
企业授权委托书范本
2014/09/22 职场文书
毕业欢送晚会主持词
2019/06/25 职场文书
用php如何解决大文件分片上传问题
2021/07/07 PHP