我们先快速搭建父子组件
子组件
I am Son
父组件
I am father
先定义值并传递给子组件
export default {
data(){
return{
name:'father'
}
},
components:{
test
}
}
这边捎带提一下为什么data规定是一个函数而不是对象
Object是引用数据类型,如果不用function 返回,每个组件的data 都是内存的同一个地址,一个数据改变了其他也改变了
javascipt只有函数构成作用域(注意理解作用域,只有函数的{}构成作用域,对象的{}以及 if(){}都不构成作用域),data是一个函数时,每个组件实例都有自己的作用域,每个实例相互独立,不会相互影响
如果两个实例同时引用一个对象,那么当你修改其中一个属性的时候,另外一个实例也会跟着改;
两个实例应该有自己各自的域才对,了解浅拷贝的朋友应该很容易理解
往子组件中传递参数,通过v:bind(缩写:)绑定数据 并通过v-model修改数据方便测试
I am father
在子组件中通过props接受 并可以直接使用插值表达式显示值
I am Son
{{name}}
扩展props参数
export default {
props:{
name:{
type: String, =>表示数据类型 如果为null支持一切格式
default: 0, =>默认值 如果父组件未传值默认的值
required: true, =>是否必须传递值
validator: function (value) { =>自定义验证函数(充当参数,此处name并不是函数,所以无需此参数)
console.log(value)
}
}
}
}
拆分一下
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 value > 10
}
}
}
注意 props 会在组件实例创建之前进行
根据传递的数据类型设置相应的参数,一般情况下只需接收即可
props参数接受可直接使用插值表达式渲染
I am Son
{{name}}
父组件接收
I am father
//此处的方法名 与 $emit设置的方法名相同
//注意方法是与$emit方法相同 而不是$emit方法与父组件设置的方法相同 逻辑不能搞错
父组件还可以使用$event 修改数据
I am father
//$event可以理解为传递的参数 效果相同
兄弟组件数据传递
先看一下父组件
I am father
=>子组件
=>子组件
test子组件
I am Son
{{name}}
testone 子组件
I am Son2
{{name}}
实现兄弟组件之间数据传递,不妨碍父组件
在src下新建js,引入vue 暴露实例
import Vue from 'Vue'
export default new Vue() =>这样既可
在兄弟组件中导入此实例
import bus from './../eventBus.js'
首先我们先在传数据的兄弟组件中操作
I am Son2
{{name}}
在另一个兄弟组件中监听此函数
I am Son
{{name}}