二分类数据集 网络视频直播系统 typeAliases iic callback swift2 swiper vue原理 管理后台模板 网赚视频教程 android项目实例 java商城源码 jquery点击事件 鼠标进入和离开事件 linux超级用户 mysql升序 cpm怎么计算 svn更新本地代码 oracle给表增加字段 oracle查看所有数据库 flutter ui构建工具 python数据库 python报错 python功能 python字典类型 python链接mysql数据库 java获取年份 java结束线程 java文件读写 java字符串匹配 javalist数组 图吧导航怎么样 ntscan python输入数字 丁丁下载 易语言多线程 渐变事件 免费的视频剪辑 一羽月土米水日古余打一成语 lol语音包
当前位置: 首页 > 学习教程  > 编程语言

vue中的父子组件传值props和$emit(event,args)

2020/7/24 11:26:36 文章标签: 测试文章如有侵权请发送至邮箱809451989@qq.com投诉后文章立即删除

props

父组件传值:<div :propA='data'>
子组件接收值:

 props: {
    // 基础的类型检查 (`null` 匹配任何类型)
    propA: Number,
    // 多个可能的类型
    propB: [String, Number],
    // 必填的字符串
    propC: {
      type: String,
      required: true
    },
    // 带有默认值的数字
    propD: {
      type: Number,
      default: 100
    },
  **加粗样式**  // 带有默认值的对象
    propE: {
      type: Object,
      // 对象或数组且一定会从一个工厂函数返回默认值
      default: function () {
        return { message: 'hello' }
      }
    },
    // 自定义验证函数
    propF: {
      validator: function (value) {
        // 这个值必须匹配下列字符串中的一个
        return ['success', 'warning', 'danger'].indexOf(value) !== -1
      }
    }
  }

type 可以是下列原生构造函数中的一个:
String
Number
Boolean
Function
Object
Array
Symbol

$emit(event,xargs)

vm.emit(event,arg)//vm.emit( event, arg ) //触发当前实例上的事件 vm.on( event, fn );//监听event事件后运行 fn;

例如:子组件:

<template>
  <div class="train-city">
    <h3>父组件传给子组件的toCity:{{sendData}}</h3> 
    <br/><button @click='select(`大连`)'>点击此处将‘大连’发射给父组件</button>
  </div>
</template>
<script>
  export default {
    name:'trainCity',
    props:['sendData'], // 用来接收父组件传给子组件的数据
    methods:{
      select(val) {
        let data = {
          cityname: val
        };
        this.$emit('showCityName',data);//select事件触发后,自动触发showCityName事件
      }
    }
  }
</script>

父组件:

<template>
    <div>
        <div>父组件的toCity{{toCity}}</div>
        <train-city @showCityName="updateCity" :sendData="toCity"></train-city>
    </div>
<template>
<script>
  import TrainCity from "./train-city";
  export default {
    name:'index',
    components: {TrainCity},
    data () {
      return {
        toCity:"北京"
      }
    },
    methods:{
      updateCity(data){//触发子组件城市选择-选择城市的事件
        this.toCity = data.cityname;//改变了父组件的值
        console.log('toCity:'+this.toCity)
      }
    }
  }
</script>

在父组件值定义的接收函数是由子组件里定义的触发函数定义的,比如子组件的@input那么每一次的输入都会调用$emit()即父组件里的函数也会被调用

总的来说是子组件定义父组件函数的触发方式


本文链接: http://www.dtmao.cc/news_show_50424.shtml

附件下载

相关教程

    暂无相关的数据...

共有条评论 网友评论

验证码: 看不清楚?