Vue组件创建和传值的方法


Posted in Javascript onAugust 17, 2018

## 创建组件的3种方法

# 第一种:
 + Vue.extend()函数返回一个组件的构造器,里面包含一个参数,参数是对象,对象里面是一些配置项
+ Vue.component()函数利用Vue.extend()返回的构造器创建一个组件的实例,有两个参数.;
参数1:组件名字,参数2:组件构造器

 注意:
      模板template中只能有一个根节点

    组建的名字采用驼峰命名的话,使用时,就要加上"-"; 例如:组件名字indexA-->index-a;

## 第二种:
 + Vue.component('indexB',{模板})

## 第三种:
 + 通过制定模板创建,在Vue管辖范围之外定义模板

## 总结:
 + 先制造一个模板,在创建组件

## 组件中使用指令:
 + 在Vue.component()里边,有template模板,有data()函数,有methods()方法
+ 注意:data()必须是一个个函数.不能使用属性定义;函数里边return出去一个对象

## 父组件传值给子组件的方法

* 先创建好父组件和子组件
* 在父组件的模板中的son,子组件标签里绑定 :属性 = 父组件需要传递的数据;
 * 在子组件的son{}中  使用props来接收父组件传递过来的数据;
 * props后跟一个数组,数组中是一个个字符串,这些字符串可以当成属性使用,即props:['属性名']

 * 代码如下:

    *

Vue.component('father',{
    template:'<div>....<son :myName="mySonName"></son></div>',
    data(){
      return{
        mySonName:'小明'
      }
    },
    //子组件
    components:{
      son:{
        props:['myName'],
        template:'...{{myName}}'
      }
    }
  })

 ## 子组件传值给父组件的方法
* 先创建好父组件和子组件;

* 在子组件methods方法中使用this.$emit()方法,
     * 这个方法有两个参数;参数1:需要与父组件交换事件名称,参数2:要传递的数据;

* 在父组件模板的son标签中使用方法名的传递:

即,@tellFatherMyname = "getMySonName";

* 在父组件的methods方法中传入data参数,这个data=子组件传递过来的数据,然后让mySonName = data;*

代码如下:     

<div id="app">
    <father></father>
  </div>
  <script>
    Vue.component('father',{
      template:`<div>
      <p>我的儿子告诉我他叫{{mySonName}}</p>
      <son @tellFatherMyname="getMySonName"></son>
      </div>`,
      data(){
        return {
          mySonName:'???'
        }
      },
      methods:{
        getMySonName(data){
          console.log(data);
          this.mySonName = data;
        }
      },
      components: {
        son:{
          data(){
            return {
            myName :'小明'
            }
          },
          template:`
              <button @click = "emitMyname">点击就告诉父亲我叫{{myName}}          
              </button>`,
          //在子组件的methods中使用this.$emit()来传递值;
          //$emit()有2个参数;参数1:需要交换的事件名,参数2:要传递的数据;例 
            如:this.name
          methods:{
            emitMyname(){
              this.$emit('tellFatherMyname',this.myName)
            }
          }
        }
      }
    })
    var vm = new Vue({
      el:'#app',
      data:{
      }
    })
  </script>

### 兄弟组件的创建和传值:

 * 创建兄弟组建时,先创建好父组件,然后在子组件中创建son组件 和 daughter组件;
 * 接下来是 son组件 和daughter组件之间传值;
 *  dau --> son传值

* 在dau中 先通过事件总线发射一个事件名称和要传递的数据;即eventbus.$emit('事件名称','数据')
     *  事件总线:

var eventbus = new Vue();

* 在 son 中先写一个钩子函数,再通过eventbus.$on('事件名称',data=>{})方法去监听,接收兄弟节点发射过来的事件
*  $on()有两个参数,参数1:事件名称;参数2:函数,函数的默认值是传递过来的数据* 代码如下:
     * 

<div id="app">
    <!-- 在此处渲染到页面上 -->
    <father></father>
  </div>
  <script>
    //先创建一个vue空实例,作为事件总线
    var eventbus = new Vue();
    Vue.component('father',{
      //组件显示的模板
      template:`<div>
            <son></son>
            <daughter></daughter>
          </div>`,
      components: {
        son:{
          data(){
           return {
            mySisterName:'???'
           }
          },
          //组件显示的模板
          template:'<p>我的妹妹告诉我她叫{{mySisterName}}</p>',
          //采用钩子函数
          //在钩子函数中通过eventbus.$on('同一个事件名称',data)来接收传递过来的数据
          mounted(){
            eventbus.$on('tellBroMyName',data=>{
              this.mySisterName = data;
            })
          }
        },
        daughter:{
          data(){
           return {
            myName:'兰兰'
           }
          },
          template:'<button @click="emitMyName">点击就告诉哥哥我叫{{myName}}</button>',
          methods:{
            //只要点击按钮,就将事件和数据一起传递过去
            emitMyName(){
              eventbus.$emit('tellBroMyName',this.myName)
            }
          }
        }
      }
    })
    var vm = new Vue({
      el:'#app',
      data:{
      }
    })
  </script>

总结

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

Javascript 相关文章推荐
JavaScript CSS 修改学习第四章 透明度设置
Feb 19 Javascript
HTML长文本截取含有HTML代码同样适用的两种方法
Jul 31 Javascript
鼠标滚轮改变图片大小的示例代码
Nov 20 Javascript
现如今最流行的JavaScript代码规范
Mar 08 Javascript
探讨JavaScript语句的执行过程
Jan 28 Javascript
js获取隐藏元素的宽高
Feb 24 Javascript
浅析JS中的 map, filter, some, every, forEach, for in, for of 用法总结
Mar 29 Javascript
Angular5集成eventbus的示例代码
Jul 19 Javascript
jQuery实现的网站banner图片无缝轮播效果完整实例
Jan 28 jQuery
利用es6 new.target来对模拟抽象类的方法
May 10 Javascript
Vue 使用beforeEach实现登录状态检查功能
Oct 31 Javascript
三剑客:offset、client和scroll还傻傻分不清?
Dec 04 Javascript
webpack多入口多出口的实现方法
Aug 17 #Javascript
angular2/ionic2 实现搜索结果中的搜索关键字高亮的示例
Aug 17 #Javascript
layer.open关闭父窗口 以及调用父页面的方法
Aug 17 #Javascript
vue+element的表格实现批量删除功能示例代码
Aug 17 #Javascript
vue富文本框(插入文本、图片、视频)的使用及问题小结
Aug 17 #Javascript
浅析vue给不同环境配置不同打包命令
Aug 17 #Javascript
React中使用async validator进行表单验证的实例代码
Aug 17 #Javascript
You might like
php程序的国际化实现方法(利用gettext)
2011/08/14 PHP
php 注释规范
2012/03/29 PHP
解密ThinkPHP3.1.2版本之模板继承
2014/06/19 PHP
基于laravel制作APP接口(API)
2016/03/15 PHP
Laravel使用scout集成elasticsearch做全文搜索的实现方法
2018/11/30 PHP
CI框架实现创建自定义类库的方法
2018/12/25 PHP
PHP判断函数是否被定义的方法
2019/06/21 PHP
解决在Laravel 中处理OPTIONS请求的问题
2019/10/11 PHP
juqery 学习之六 CSS--css、位置、宽高
2011/02/11 Javascript
JQuery 自定义CircleAnimation,Animate方法学习笔记
2011/07/10 Javascript
Prototype的Class.create函数解析
2011/09/22 Javascript
浏览器页面区域大小的js获取方法
2013/09/21 Javascript
JqueryMobile动态生成listView并实现刷新的两种方法
2014/03/05 Javascript
JQuery基础语法小结
2015/02/27 Javascript
JS解析XML文件和XML字符串详解
2015/04/17 Javascript
JavaScript中string对象
2015/06/12 Javascript
Javascript技术难点之apply,call与this之间的衔接
2015/12/04 Javascript
jquery 无限极下拉菜单的简单实例(精简浓缩版)
2016/05/31 Javascript
解决vue v-for 遍历循环时key值报错的问题
2018/09/06 Javascript
解决Vue项目打包后打开index.html页面显示空白以及图片路径错误的问题
2019/10/25 Javascript
python回溯法实现数组全排列输出实例分析
2015/03/17 Python
编写Python的web框架中的Model的教程
2015/04/29 Python
Python3.6.2调用ffmpeg的方法
2019/01/10 Python
python 实现提取某个索引中某个时间段的数据方法
2019/02/01 Python
Python实现字符串匹配的KMP算法
2019/04/04 Python
Python实现代码块儿折叠
2020/04/15 Python
使用sklearn对多分类的每个类别进行指标评价操作
2020/06/11 Python
任意一块网页内容实现“活”的背景(目前火狐浏览器专有)
2014/05/07 HTML / CSS
HTML5 使用 sessionStorage 进行页面传值的方法
2018/07/02 HTML / CSS
Love, Bonito国际官网:新加坡女装品牌
2021/03/13 全球购物
资源环境与城市管理专业推荐信
2013/11/30 职场文书
英语教师岗位职责
2014/03/16 职场文书
平安家庭示范户事迹
2014/06/02 职场文书
涉及车辆房产分割的离婚协议书范文
2014/10/12 职场文书
党支部评议意见
2015/06/02 职场文书
校运会新闻稿
2015/07/17 职场文书