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 相关文章推荐
jQuery Ajax文件上传(php)
Jun 16 Javascript
JQuery Ajax通过Handler访问外部XML数据的代码
Jun 01 Javascript
js的写法基础分析
Jan 17 Javascript
escape编码与unescape解码汉字出现乱码的解决方法
Jul 02 Javascript
JS实现网页滚动条感应鼠标变色的方法
Feb 26 Javascript
12行javascript代码绘制一个八卦图
Apr 02 Javascript
Iphone手机、安卓手机浏览器控制默认缩放大小的方法总结(附代码)
Aug 18 Javascript
JavaScript实现单例模式实例分享
Dec 22 Javascript
vue返回上一页面时回到原先滚动的位置的方法
Dec 20 Javascript
何时/使用 Vue3 render 函数的教程详解
Jul 25 Javascript
vue 动态设置img的src地址无效,npm run build 后找不到文件的解决
Jul 26 Javascript
JavaScript实现alert弹框效果
Nov 19 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编程最快明白》第二讲 数字、浮点、布尔型、字符串和数组
2010/11/01 PHP
laravel 5 实现模板主题功能
2015/03/02 PHP
CodeIgniter与PHP5.6的兼容问题
2015/07/16 PHP
Laravel中使用Queue的最基本操作教程
2017/12/27 PHP
Laravel 对某一列进行筛选然后求和sum()的例子
2019/10/10 PHP
JS实现随机化快速排序的实例代码
2013/08/01 Javascript
cookie的复制与使用记住用户名实现代码
2013/11/04 Javascript
jquery实现的网页自动播放声音
2014/04/30 Javascript
图片放大镜jquery.jqzoom.js使用实例附放大镜图标
2014/06/19 Javascript
JavaScript中的全局对象介绍
2015/01/01 Javascript
nodejs 整合kindEditor实现图片上传
2015/02/03 NodeJs
浅析AMD CMD CommonJS规范--javascript模块化加载学习心得总结
2016/03/16 Javascript
文件上传的几个示例分享【推荐】
2016/12/16 Javascript
JavaScript 动态三角函数实例详解
2017/01/08 Javascript
js css3实现图片拖拽效果
2017/03/04 Javascript
微信小程序block的使用教程
2018/04/01 Javascript
vuejs2.0运用原生js实现简单拖拽元素功能
2020/08/21 Javascript
jQuery实现的五星点评功能【案例】
2019/02/18 jQuery
vue实现输入框的模糊查询的示例代码(节流函数的应用场景)
2019/09/01 Javascript
vue实现鼠标移过出现下拉二级菜单功能
2019/12/12 Javascript
Python自定义函数的创建、调用和函数的参数详解
2014/03/11 Python
python re模块findall()函数实例解析
2018/01/19 Python
python清除字符串中间空格的实例讲解
2018/05/11 Python
Python标准库使用OrderedDict类的实例讲解
2019/02/14 Python
Python实现变声器功能(萝莉音御姐音)
2019/12/05 Python
解决Python在导入文件时的FileNotFoundError问题
2020/04/10 Python
分布式全文检索引擎ElasticSearch原理及使用实例
2020/11/14 Python
python多线程和多进程关系详解
2020/12/14 Python
html5中canvas图表实现柱状图的示例
2017/11/13 HTML / CSS
世界上最好的威士忌和烈性酒购买网站:The Whisky Exchange
2016/11/20 全球购物
科颜氏法国官网:Kiehl’s法国
2019/08/20 全球购物
测试工程师程序员求职信范文
2014/02/20 职场文书
继承权公证书
2014/04/09 职场文书
高校教师个人总结
2015/02/10 职场文书
2015年办公室主任工作总结
2015/04/09 职场文书
Python中的np.argmin()和np.argmax()函数用法
2021/06/02 Python