目录
vue组件传值
父子传值
父传子
传 子组件标签 属性名=值
收 props:{
属性名:{
type:类型,多个类型 [Object,Array,String],
default:基本数据类型,直接写
复杂数据类型:()=>{return 复杂数据类型}
required:true, // 必填
validator:(value)=>{
return boolean值
true:验证通过
false:验证失败
}
}
单向数据流:栈不可修改,堆随便改
基本数据类型不可修改,复杂 数据类型,只要不修改它的引用地址(栈),它的值随便修改
}
子传父(子触发父方法)
绑定: 子组件标签 @子组件方法名="父组件方法"
触发:
子组件内触发:this.$emit('子组件方法名',参数值)
兄弟组件传值
1:Vue.prototype.$bus=new Vue()
2: 监听 this.$bus.$on('方法名',(参数值)=>{...})
3:触发 this.$bus.$emit('方法名',实参值)
4:销毁 this.$bus.$off('方法名')
特点:bus的监听会累加,bus的监听不使用时要销毁,beforeDestroy销毁处理
v-model
子组件标签 :value="父组件属性" @input="父组件属性=$event"
子组件标签 v-model="父组件属性"
子组件内:
props:['value']
model:{
prop:'value',
event:'input'
}
触发:this.$emit('input',实参值)
.sync修饰符
子组件标签 :属性名="父组件属性" @update:属性名="父组件属性=$event"
子组件标签 :属性名.sync="父组件属性"
子组件内
props:['属性名']
触发:this.$emit('@update:属性名',实参值)
父子组件之间的双向绑定
父子组件双向绑定
子组件标签 :value="父组件属性" @input="父组件属性=$event"
子组件标签 v-model="父组件属性"
子组件内:
props:['value'],
model:{
prop:'传入的属性名,默认是value',
event:'绑定的事件名,默认是input'
},
单向数据流:栈不可修改,堆可以修改
基本数据类型不可修改,复杂数据类型,只要不改变它的引用地址(栈),它的值随便修改
this.$emit('input',实参值)
1:子组件标签上 :value="父组件属性" @input="父组件属性=$event"
子组件标签上 v-model="父组件属性"
2:子组件内
props:['value'],
修改value
this.$emit('input',修改后的值)
不使用value和input
model:{
prop:'value',
event:'input'
}
第一种写法是:
在父组件里面的子组件标签
<template>
<div>
首页
<h3>使用全局组件v-model 第一种方式</h3>
<h2>{{ fatherNum }}</h2>
<!-- <HmNum :value="fatherNum" @input="fatherNum = $event" /> -->
</div>
</template>
<script>
export default {
data() {
return {
fatherNum: 1
}
},
created() {},
methods: {}
}
</script>
<style></style>
然后在子组件接受
<template>
<div>
<button @click="btn(-1)">-</button>
<input type="text" :value="value"><button @click="btn(1)">+</button>
</div>
</template>
<script>
export default {
name: 'HmNum',
// 这是第一种
props: {
value: {
type: Number,
default: 1
}
},
methods: {
btn(a) {
this.$emit('input', this.value + a)
}
}
}
</script>
<style></style>
以上这种方式实现的父子组件的v-model通信,虽可行,但限制了我们必须popos接收的属性名为value和emit触发的必须为input,这样就容易有冲突,特别是在表单里面。所以,
为了更优雅的使用v-model通信而解决冲突的问题,我们可以通过在子组件中使用model选项,
下面演示写法2:
在父组件里面的子组件标签
<template>
<div>
首页
<h3>使用全局组件v-model 第一种方式</h3>
<h2>{{ fatherNum }}</h2>
<HmNum v-model="fatherNum" />
</div>
</template>
<script>
export default {
data() {
return {
fatherNum: 1
}
},
created() {},
methods: {}
}
</script>
<style></style>
然后在子组件接受
<template>
<div>
<button @click="btn(-1)">-</button>
<input type="text" :value="aaa"><button @click="btn(1)">+</button>
</div>
</template>
<script>
export default {
name: 'HmNum',
// 这是第一二种
model: {
// 这个是属性值
prop: 'aaa',
// 这个是绑定的事件名
event: 'xxx'
},
props: {
aaa: {
type: Number,
default: 1
}
},
methods: {
btn(a) {
this.$emit('xxx', this.aaa + a)
}
}
}
</script>
<style></style>
注意:
第二种方式还有的好处是减少了父组件的代码,在自己组件里面就把事件,和值都写了
兄弟组件之间传值的话,最后一定要销毁,不然的话会造成 累计加!