vue组件间的通信

1.vue2.0以后取消掉了子组件修改父组件数据,数据是:单向数据流。
2.父组件给子组件传递数据:forexample
父组件是通过属性向子组件传递数据。----通过props

<div class="app">
         // 父组件向子组件通过msg1发送了数据speak
 <zujian1 :msg1 = "speak"></zujian1>
</div>
<template id="one">
 <div>
     <span>{{msg}}</span>
     <div>{{msg1}}</div>
 </div>
</template>
<script src="vue.js"></script>
<script>
 const zujian1 = {
     template:"#one",
     data(){
         return {
             msg: "aaa"
         }
     },
   // 子组件通过props接收父组件传过来的msg1,这里的msg1就是数据了
     props:['msg1']
 }
new Vue({
   el:".app",
   data:{
       speak:{
           name:"MFH",
           age:18,
           nex:'男'
       }
   },
   methods:{},
   components:{
       'zujian1':zujian1,
   }
})
</script>

子组件通过props接收父组件传过来的数据有3种不同的形式
1.最简单形式,直接一个数组,里面放名称 props:['msg1']
2.对象的形式(这里的msg1就可以用object了)
props: {
title: String,
likes: Number,
isPublished: Boolean,
commentIds: Array,
author: Object,
callback: Function,
contactsPromise: Promise // or any other constructor
}
3.[Prop 验证]我们可以为组件的 prop 指定验证要求,例如你知道的这些类型。如果有一个需求没有被满足,则 Vue 会在浏览器控制台中警告你。这在开发一个会被别人用到的组件时尤其有帮助
这里引入官网的例子

Vue.component('my-component', {
  props: {
    // 基础的类型检查 (`null` 和 `undefined` 会通过任何类型验证)
    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
      }
    }
  }
})

组件间的通信可以通过:事件管理组件通信
详情信息在vue2.0与1.0的区别中有谈到。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 之前用vue完成了公司的新项目,遇到一些问题,也收获了很多。vue项目中涉及最多的就是组件间的通信。所及对vue组...
    一枚程序猿阅读 3,968评论 0 4
  • 1.父子组件间的通信 我们都知道通常来说父与子组件的之间都是props 或者 $emit 来进行数据的相互通信 如...
    往复随安_cc75阅读 3,017评论 0 0
  • vue组件间的通信主要分为三类: ◆ 父==>子 ◆ 子==>父 ◆ 非父子 方法其实有好几种,下面分享一下我自己...
    汶沐阅读 2,241评论 0 0
  • 作为一个合格的开发者,不要只满足于编写了可以运行的代码。而要了解代码背后的工作原理;不要只满足于自己的程序...
    六个周阅读 12,692评论 1 33
  • 父组件向子组件通信 第一步,引用子组件的时候传入数据 第二步,在子组件中显示声明拥有该属性 第三步,子组件使用数据...
    _imp_阅读 1,397评论 0 0