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的区别中有谈到。