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.validate使用攻略 第二部
Jul 01 Javascript
div当滚动到页面顶部的时候固定在顶部实例代码
May 27 Javascript
JavaScript自动设置IFrame高度的小例子
Jun 08 Javascript
正负小数点后两位浮点数实现原理及代码
Sep 06 Javascript
JavaScript针对网页节点的增删改查用法实例
Feb 02 Javascript
不同编码的页面表单数据乱码问题解决方法
Feb 15 Javascript
Js apply方法详解
Feb 16 Javascript
Angular5中提取公共组件之radio list的实例代码
Jul 10 Javascript
解决bootstrap模态框数据缓存的问题方法
Aug 10 Javascript
localstorage实现带过期时间的缓存功能
Jun 28 Javascript
JavaScript 作用域scope简单汇总
Oct 23 Javascript
vue2的 router在使用过程中遇到的一些问题
Apr 13 Vue.js
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
人大复印资料处理程序_输入篇
2006/10/09 PHP
聊天室php&amp;mysql(二)
2006/10/09 PHP
php实现的太平洋时间和北京时间互转的自定义函数分享
2014/08/19 PHP
示例详解Laravel重置密码代码重构
2016/08/10 PHP
PHP Post获取不到非表单数据的问题解决办法
2018/02/27 PHP
PHP发送邮件确认验证注册功能示例【修改别人邮件类】
2019/11/09 PHP
javascript事件模型代码
2007/07/01 Javascript
JQuery UI DatePicker中z-index默认为1的解决办法
2010/09/28 Javascript
基于JQuery的动态删除Table表格的行和列的代码
2011/05/12 Javascript
25个非常棒的jQuery滑块插件和教程小结
2011/09/02 Javascript
不提示直接关闭网页窗口的JS示例代码
2013/12/17 Javascript
jqTransform美化表单
2015/10/10 Javascript
jQuery的图片轮播插件PgwSlideshow使用详解
2016/08/11 Javascript
浅谈JS使用[ ]来访问对象属性
2016/09/21 Javascript
Flutter部件内部状态管理小结之实现Vue的v-model功能
2019/06/11 Javascript
vant组件中 dialog的确认按钮的回调事件操作
2020/11/04 Javascript
python中将字典转换成其json字符串
2014/07/16 Python
用Python的pandas框架操作Excel文件中的数据教程
2015/03/31 Python
matplotlib给子图添加图例的方法
2018/08/03 Python
浅谈Python中的bs4基础
2018/10/21 Python
python 实现多维数组(array)排序
2020/02/28 Python
PyTorch: Softmax多分类实战操作
2020/07/07 Python
瑞典时尚服装购物网站:Miinto.se
2017/10/30 全球购物
美国轮胎网站:Priority Tire
2018/11/28 全球购物
编写一个 C 函数,该函数在一个字符串中找到可能的最长的子字符串,且该字符串是由同一字符组成的
2015/07/23 面试题
经理秘书求职自荐信范文
2014/03/23 职场文书
村班子对照检查材料
2014/08/18 职场文书
2014班子“三严三实”对照检查材料思想汇报
2014/09/18 职场文书
党的群众路线批评与自我批评发言稿
2014/10/16 职场文书
个人存款证明书
2014/10/18 职场文书
创先争优承诺书
2015/01/20 职场文书
平遥古城导游词
2015/02/03 职场文书
热血教师观后感
2015/06/10 职场文书
农村婚庆主持词
2015/06/29 职场文书
2016秋季小学开学寄语
2015/12/03 职场文书
Python如何使用循环结构和分支结构
2022/04/13 Python