Vue中父子组件的值传递与方法传递


Posted in Javascript onSeptember 28, 2020

一.Vue中父组件向子组件传值

利用v-bind向子组件传值,子组件中利用props接受

<div id="app">
  <father></father>
</div>
<template id="father">
  <div>
    <!--注意点: 组件是可以使用自己的数据的-->
    <p>{{name}}</p>
    <p>{{age}}</p>
    <!--这里将父组件的name通过parentname传递给了子组件-->
    <son :parentname="name" :abc="age"></son>
  </div>
</template>
<template id="son">
  <div>
    <!--这里通过parentname使用了父组件传递过来的数据-->
    <p>{{parentname}}</p>
    <p>{{abc}}</p>
  </div>
</template>
<script>
  // 父组件
  Vue.component("father", {
    template: "#father",
    data: function(){
     return {
       name: "wqd",
       age: 21
     }
    },
    // 子组件
    components: {
      "son": {
        template: "#son",
        //这里通过parentname接收了父组件传递过来的数据
        props: ["parentname", "abc"]
      }
    }
  });
  // 这里就是MVVM中的View Model
  let vue = new Vue({
    el: '#app',
    // 这里就是MVVM中的Model
    data: {
    },
  });
</script>

二.Vue中父组件向子组件传递方法

父组件利用v-on传值,子组件this.$emit来接收

<div id="app">
  <father></father>
</div>
<template id="father">
  <div>
    <button @click="say">我是按钮</button>
    <!--这里通过parentsay将父组件的say方法传递给了子组件-->
    <son @parentsay="say"></son>
  </div>
</template>
<template id="son">
  <div>
    <button @click="sonFn">我是按钮</button>
  </div>
</template>
<script>
  // 父组件
  Vue.component("father", {
    template: "#father",
    methods: {
      say(){
        console.log("helloworld")
      }
    },
    // 子组件
    components: {
      "son": {
        template: "#son",
        /*
        注意点: 和传递数据不同, 如果传递的是方法, 那么在子组件中不需要接收,需要在子组件自定义的方法中通this.$emit("自定义接收的名称")的方法来触发父组件传递过来的方法
        */
        // props: ["parentsay"]
        methods: {
          sonFn(){
            this.$emit("parentsay");
          }
        }
      }
    }
  });
  // 这里就是MVVM中的View Model
  let vue = new Vue({
    el: '#app',
    // 这里就是MVVM中的Model
    data: {
    },
  });
</script>

三.Vue中子组件向父组件传值

this.$emit中第一个参数为接收父组件传递的方法,第二个参数即为向父组件传递的值

<div id="app">
  <father></father>
</div>
<template id="father">
  <div>
    <button @click="say">我是按钮</button>
    <!--这里通过parentsay将父组件的say方法传递给了子组件-->
    <son @parentsay="say"></son>
  </div>
</template>
<template id="son">
  <div>
    <button @click="sonFn">我是按钮</button>
  </div>
</template>
<script>
  // 父组件
  Vue.component("father", {
    template: "#father",
    methods: {
      //data用来接受子组件传递的值
      say(data){
        console.log(data);
      }
    },
    // 子组件
    components: {
      "son": {
        template: "#son",
        methods: {
          sonFn(){
            // 第一个参数: 需要调用的函数名称
            // 后续的参数: 给调用的函数传递的参数
            this.$emit("parentsay", "你好");
          }
        }
      }
    }
  });
  // 这里就是MVVM中的View Model
  let vue = new Vue({
    el: '#app',
    // 这里就是MVVM中的Model
    data: {
    },
    
  });
</script>

到此这篇关于Vue中父子组件的值传递与方法传递的文章就介绍到这了,更多相关Vue父子组件传递内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
用Juery网页选项卡实现代码
Jun 13 Javascript
使用javascript实现雪花飘落的效果
Jan 13 Javascript
关于vue-router路径计算问题
May 10 Javascript
详解Angular5 服务端渲染实战
Jan 04 Javascript
Vue.js 点击按钮显示/隐藏内容的实例代码
Feb 08 Javascript
Vue.js自定义指令学习使用详解
Oct 19 Javascript
Javascript实现秒表计时游戏
May 27 Javascript
js实现鼠标点击飘爱心效果
Aug 19 Javascript
JavaScript常用8种数组去重代码实例
Sep 09 Javascript
vue实现点击出现操作弹出框的示例
Nov 05 Javascript
JS实现炫酷轮播图
Nov 15 Javascript
js 数组 fill() 填充方法
Nov 02 Javascript
JSONObject与JSONArray使用方法解析
Sep 28 #Javascript
OpenLayer3自定义测量控件MeasureTool
Sep 28 #Javascript
Openlayers实现距离面积测量
Sep 28 #Javascript
Openlayers+EasyUI Tree动态实现图层控制
Sep 28 #Javascript
JS sort排序详细使用方法示例解析
Sep 27 #Javascript
vue中实现点击变成全屏的多种方法
Sep 27 #Javascript
通过实例解析json与jsonp原理及使用方法
Sep 27 #Javascript
You might like
PHP分页显示制作详细讲解
2006/12/05 PHP
php判断字符以及字符串的包含方法属性
2008/08/30 PHP
浅析Dos下运行php.exe,出现没有找到php_mbstring.dll 错误的解决方法
2013/06/29 PHP
PHP创建文件,并向文件中写入数据,覆盖,追加的实现代码
2016/03/25 PHP
如何让div span等元素能响应键盘事件操作指南
2012/11/13 Javascript
javascript实现仿IE顶部的可关闭警告条
2015/05/05 Javascript
vue loadmore 组件滑动加载更多源码解析
2017/07/19 Javascript
在Debian(Raspberry Pi)树莓派上安装NodeJS的教程详解
2017/09/19 NodeJs
Node做中转服务器转发接口
2017/10/18 Javascript
VSCode配置react开发环境的步骤
2017/12/27 Javascript
动态加载权限管理模块中的Vue组件
2018/01/16 Javascript
基于ionic实现下拉刷新功能
2018/05/10 Javascript
详解javascript函数写法大全
2019/03/25 Javascript
微信小程序实现人脸识别登陆的示例代码
2019/04/02 Javascript
构建大型 Vue.js 项目的10条建议(小结)
2019/11/14 Javascript
原生js实现贪吃蛇游戏
2020/10/26 Javascript
python使用sorted函数对列表进行排序的方法
2015/04/04 Python
python简单实现计算过期时间的方法
2015/06/09 Python
Python的净值数据接口调用示例分享
2016/03/15 Python
举例讲解Python中metaclass元类的创建与使用
2016/06/30 Python
python subprocess 杀掉全部派生的子进程方法
2017/01/16 Python
Python算术运算符实例详解
2017/05/31 Python
django初始化数据库的实例
2018/05/27 Python
基于python代码实现简易滤除数字的方法
2018/07/17 Python
Python log模块logging记录打印用法解析
2020/01/20 Python
3种适用于Python的疯狂秘密武器及原因解析
2020/04/29 Python
python怎么调用自己的函数
2020/07/01 Python
Ubuntu权限不足无法创建文件夹解决方案
2020/11/14 Python
一家专门做特卖的网站:唯品会
2016/10/09 全球购物
PurCotton全棉时代官网:100%天然棉花生产的生活护理用品
2016/11/18 全球购物
美国知名保健品网站:LuckyVitamin(支持中文)
2017/08/09 全球购物
作弊检讨书1000字
2014/02/01 职场文书
中国梦读书活动总结
2014/07/10 职场文书
镇党政领导班子民主生活会思想汇报
2014/10/11 职场文书
2015年出纳个人工作总结
2015/04/02 职场文书
Go各时间字符串使用解析
2021/04/02 Golang