我们先快速搭建父子组件
子组件
<template>
<div>
<h3 style="color:red">I am Son</h3>
</div>
</template>
<script>
export default {
}
</script>
<style>
</style>
父组件
<template>
<div>
<h2>I am father</h2>
<test></test>
</div>
</template>
<script>
import test from './Test'
export default {
components:{
test
}
}
</script>
<style>
</style>
先定义值并传递给子组件
export default {
data(){
return{
name:'father'
}
},
components:{
test
}
}
这边捎带提一下为什么data规定是一个函数而不是对象
Object是引用数据类型,如果不用function 返回,每个组件的data 都是内存的同一个地址,一个数据改变了其他也改变了
javascipt只有函数构成作用域(注意理解作用域,只有函数的{}构成作用域,对象的{}以及 if(){}都不构成作用域)，data是一个函数时，每个组件实例都有自己的作用域，每个实例相互独立,不会相互影响
如果两个实例同时引用一个对象,那么当你修改其中一个属性的时候,另外一个实例也会跟着改;
两个实例应该有自己各自的域才对,了解浅拷贝的朋友应该很容易理解
往子组件中传递参数，通过v:bind（缩写：）绑定数据 并通过v-model修改数据方便测试
<template>
<div>
<h2>I am father</h2>
<p>
<input type="text" v-model="name">
</p>
<test :name="name"></test>
</div>
</template>
<script>
import test from './Test'
export default {
data(){
return{
name:'father'
}
},
components:{
test
}
}
</script>
<style>
</style>
在子组件中通过props接受 并可以直接使用插值表达式显示值
<template>
<div>
<h3 style="color:red">I am Son</h3>
{{name}}
</div>
</template>
<script>
export default {
props:['name']
}
</script>
<style>
</style>
扩展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 会在组件实例创建之前进行
根据传递的数据类型设置相应的参数，一般情况下只需接收即可
<script>
export default {
props:['name'] =>如有多个值直接在数组后方添加即可
}
</script>
props参数接受可直接使用插值表达式渲染
<template>
<div>
<h3 style="color:red">I am Son</h3>
{{name}}
<p>
<input type="text" v-model="childName">
</p>
<p>
<button @click="change">change</button>
</p>
</div>
</template>
<script>
export default {
props:['name'],
data(){
return{
childName:'child'
}
},
methods:{
change(){
//childByValue是在父组件on监听的方法
//第二个参数this.childName是需要传的值
this.$emit('childByValue',this.childName) =>使用$emit创建方法 将this.childName为数据传递过去
}
}
}
</script>
<style>
</style>
父组件接收
<div>
<h2>I am father</h2>
<p>
<input type="text" v-model="name">
</p>
<test :name="name" @childByValue="childByValue"></test> //此处的方法名 与 $emit设置的方法名相同
//注意方法是与$emit方法相同 而不是$emit方法与父组件设置的方法相同 逻辑不能搞错
</div>
</template>
<script>
import test from './Test'
export default {
data(){
return{
name:'father'
}
},
methods:{
childByValue: function (childValue) { =>此参数便是 子组件传递的参数 此时name将修改为子组件传递的值
// childValue就是子组件传过来的值
this.name = childValue
}
},
components:{
test
}
}
</script>
<style>
</style>
父组件还可以使用$event 修改数据
<template>
<div>
<h2>I am father</h2>
<p>
<input type="text" v-model="name">
</p>
<test :name="name" @childByValue="name=$event"></test> //$event可以理解为传递的参数 效果相同
</div>
</template>
<script>
import test from './Test'
export default {
data(){
return{
name:'father'
}
},
components:{
test
}
}
</script>
<style>
</style>
兄弟组件数据传递
先看一下父组件
<template>
<div>
<h2>I am father</h2>
<p>
<input type="text" v-model="name">
</p>
<hr>
<test :name="name" @childByValue="name=$event"></test> =>子组件
<hr>
<testone :name="name"></testone> =>子组件
</div>
</template>
<script>
import test from './Test'
import testone from './Test1'
export default {
data(){
return{
name:'father'
}
},
components:{
test,
testone
}
}
</script>
<style>
</style>
test子组件
<template>
<div>
<h3 style="color:red">I am Son</h3>
{{name}}
<p>
<input type="text" v-model="childName">
</p>
<p>
<button @click="change">change</button>
</p>
</div>
</template>
<script>
export default {
props:['name'],
data(){
return{
childName:'child'
}
},
methods:{
change(){
// childByValue是在父组件on监听的方法
// 第二个参数this.childName是需要传的值
this.$emit('childByValue',this.childName)
}
}
}
</script>
<style>
</style>
testone 子组件
<template>
<div>
<h3 style="color:red">I am Son2</h3>
{{name}}
</div>
</template>
<script>
export default {
props:['name']
}
</script>
<style>
</style>
实现兄弟组件之间数据传递，不妨碍父组件
在src下新建js，引入vue 暴露实例
import Vue from 'Vue'
export default new Vue() =>这样既可
在兄弟组件中导入此实例
import bus from './../eventBus.js'
首先我们先在传数据的兄弟组件中操作
<template>
<div>
<h3 style="color:red">I am Son2</h3>
{{name}}
<p>
<button @click="change">changeBorther</button>
</p>
</div>
</template>
<script>
import bus from './../eventBus.js'
export default {
props:['name'],
methods:{
change(){
bus.$emit('changeBortherName','大哥莫慌，我来了')=>同样是两个参数
=>注意此处是bus新vue实例 不是this
}
}
}
</script>
<style>
</style>
在另一个兄弟组件中监听此函数
<template>
<div>
<h3 style="color:red">I am Son</h3>
{{name}}
<p>
<input type="text" v-model="childName">
</p>
<p>
<button @click="change">change</button>
</p>
</div>
</template>
<script>
import bus from './../eventBus.js'
export default {
props:['name'],
data(){
return{
childName:'child'
}
},
methods:{
change(){
// childByValue是在父组件on监听的方法
// 第二个参数this.childName是需要传的值
this.$emit('childByValue',this.childName)
}
},
created(){ =>利用vue生命周期函数机制 将方法写入生命函数之中
bus.$on('changeBortherName',function(value){ =>注意 此处依旧是bus 通过$on 监听 $emit方法
console.log(value) =>大哥莫慌，我来了 （得到数据了 可以自行利用即可）
})
}
}
</script>
<style>
</style>
网友评论