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 相关文章推荐
js日期范围初始化得到前一个月日期的方法
May 05 Javascript
JavaScript中innerHTML,innerText,outerHTML的用法及区别
Sep 01 Javascript
jQuery滚动加载图片实现原理
Dec 14 Javascript
JavaScript实现数据类型的相互转换
Mar 06 Javascript
jQuery UI库中dialog对话框功能使用全解析
Apr 23 Javascript
JS加载器如何动态加载外部js文件
May 26 Javascript
纯css下拉菜单 无需js
Aug 15 Javascript
微信小程序开发实战教程之手势解锁
Nov 18 Javascript
jQuery实现动态删除LI的方法
May 30 jQuery
浅谈Vue 初始化性能优化
Aug 31 Javascript
laydate如何根据开始时间或者结束时间限制范围
Nov 15 Javascript
vue之a-table中实现清空选中的数据
Nov 07 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
建立动态的WML站点(三)
2006/10/09 PHP
PHP中,文件上传
2006/12/06 PHP
php 输出双引号&quot;与单引号'的方法
2010/05/09 PHP
LAMP环境使用Composer安装Laravel的方法
2017/03/25 PHP
PHP实现生成模糊图片的方法示例
2017/12/21 PHP
php使用自带dom扩展进行元素匹配的原理解析
2020/05/29 PHP
TNC vs IO BO3 第一场2.13
2021/03/10 DOTA
javascript中的prototype属性使用说明(函数功能扩展)
2010/08/16 Javascript
使用隐藏的new来创建对象
2011/03/29 Javascript
jquery二级导航内容均分的原理及实现
2013/08/13 Javascript
批量修改标签css样式以input标签为例
2014/07/31 Javascript
基于jQuery实现动态搜索显示功能
2016/05/05 Javascript
老生常谈combobox和combotree模糊查询
2017/04/17 Javascript
jQuery中each循环的跳出和结束实例
2017/08/16 jQuery
微信小程序自定义toast实现方法详解【附demo源码下载】
2017/11/28 Javascript
vue2.0 根据状态值进行样式的改变展示方法
2018/03/13 Javascript
Vue下路由History模式打包后页面空白的解决方法
2018/06/29 Javascript
layui点击按钮添加可编辑的一行方法
2018/08/15 Javascript
在Create React App中使用CSS Modules的方法示例
2019/01/15 Javascript
Angular2使用SVG自定义图表(条形图、折线图)组件示例
2019/05/10 Javascript
vue2 拖动排序 vuedraggable组件的实现
2019/08/08 Javascript
NodeJS模块Buffer原理及使用方法解析
2020/11/11 NodeJs
python魔法方法-属性转换和类的表示详解
2016/07/22 Python
深入理解Python中的内置常量
2017/05/20 Python
Python实现压缩和解压缩ZIP文件的方法分析
2017/09/28 Python
django多种支付、并发订单处理实例代码
2019/12/13 Python
python字典setdefault方法和get方法使用实例
2019/12/25 Python
python图片验证码识别最新模块muggle_ocr的示例代码
2020/07/03 Python
澳大利亚设计师服装在线:MISHA
2019/10/07 全球购物
成人继续教育实施方案
2014/03/01 职场文书
陈胜吴广起义口号
2014/06/20 职场文书
个人工作保证书
2015/02/28 职场文书
意外事故赔偿协议书
2016/03/22 职场文书
祝福语集锦:送给毕业同学祝福语
2019/11/21 职场文书
python opencv将多个图放在一个窗口的实例详解
2022/02/28 Python
java项目构建Gradle的使用教程
2022/03/24 Java/Android