1.组件通信自定义事件深入
父组件给子组件绑定原生DOM事件
<template>
<div>
<!-- 此处的Son为组件Father的子组件 -->
<Son @click="Dome"></Son>
<!-- 此时@click会被认为是组建的自定义事件需要在子组件中用$emit触发绑定事件 -->
<Son @click.native="Dome"></Son>
<!-- native:原生的 将组建的自定义事件转化为DOM的原生事件
其原理就是给子元素的根节点绑定了单击事件-->
<button @click="Dome">按钮绑定自定义事件，没办法触发没有意义</button>
</div>
</template>
<script>
import Son from './components/Son.vue';
export default {
name:'Father',
components:{
Son,
},
methods:{
Dome(){
alert("绑定Son组件的单击事件Dome被执行了")
}
}
};
</script>
2.v-model深入
<template>
<div>
{{ textData }}
<input type="text" v-model="textData">
<!-- 实现v-model功能
1.给input框绑定一个value值textData
2.触发input事件（@input 表单元素文本发生变化时会执行）
3.变化后的textData再赋值给textData
($event.target.value 当前DOM元素变化后的value值 )
-->
<input type="text" :value="textData" @input="textData=$event.target.value" >
<!-- 实现父子组件数据同步功能
1.给子组件传递数据textData
2.给子组件绑定自定义事件@vmodel 回调 将自定义事件的返回值赋给textData
-->
<Son :textData="textData" @vmodel="textData=$event"></Son>
<!-- :textData="textData" @vmodel="textData=$event" 等同于 v-model="textData" -->
<Son v-model="textData"></Son>
</div>
</template>
<script>
import Son from './components/Son.vue';
export default {
name:'Father',
components:{ Son, },
data() {
return {
textData:'我是数据'
}
},
};
</script>
<template>
<div class="Son" >
我是Son组件
<!--2.将textData的值赋给文本框的值value
3.触发input事件 调用自定义事件vmodel，将input框最新的值传给返回给父组件 -->
<input type="text" :value="textData" @input="$emit('vmodel',$event.target.value)" >
</div>
</template>
<script>
export default {
// 1.接收父组件传过来的值textData
props:['textData'],
name:'Son',
}
</script>
3.sync修饰符
<template>
<div>
我今年{{ age }}岁。<br>
<Son :age="age" @updata:age="age=$event"></Son>
<!-- .sync修饰符等同于 @updata:age="age=$event"
:age.sync="age" 给子组件传递了一个age数据
并给子组件绑定了一个@updata:age事件
-->
<Son :age.sync="age" ></Son>
</div>
</template>
<script>
import Son from './components/Son.vue';
export default {
name:'Father',
components:{ Son, },
data() {
return {
age:18,
}
},
};
</script>
<template>
<div class="Son" >
现在他 {{ age }}岁
<button @click="$emit('updata:age',age-1)">过了一年</button>
</div>
</template>
<script>
export default {
props:['age'],
name:'Son',
}
</script>
4.$attrs 和 $listener
<template>
<div>
<Son
type="primary"
title="提示"
@click="Dome"
></Son>
</div>
</template>
<script>
import Son from './components/Son.vue';
export default {
name:'Father',
components:{ Son,},
methods:{
Dome(){
alert('提示我')
},
}
};
</script>
:::tips
$attrs 用于接受父组件传来的参数 type="primary" title="提示"
当子组件用props接收参数 title="提示" $attrs 接受的参数将会将 title="提示" 去掉剩下 type="primary"
使用的时候必须配合 v-bind="$attrs" 不能简写
$listeners 用于接收父组件传过来的自定义事件 使用时必须 v-on="$listeners" 不能写成简写形式
:::
<template>
<div class="Son" >
<a title="title">
<el-button v-bind="$attrs" v-on="$listeners" > 加载中</el-button>
<br>
<button @click="Dome" v-on="" >nininin</button>
</a>
</div>
</template>
<script>
export default {
name:"Son",
props:['title'],
methods:{
Dome(){
console.log(this.$listeners)
}
}
}
</script>
5.$children和$parent
1 $children 可以拿到父组件中的所有子组件，值为一个数组
2 $parent 可以拿到子组件的父组件
<template>
<div>
{{ money }}
<button @click="getSonMoney(100)">向son借钱100元</button>
<button @click="getSon2Money(200)">向son借钱200元</button>
<button @click="getAllMoney(300)">向son和son2借钱300元</button>
<Son ref="son"></Son>
<Son2 ref="son2"></Son2>
</div>
</template>
<script>
import Son from './components/Son.vue';
import Son2 from './components/Son2.vue';
export default {
name:'Father',
components:{ Son,Son2},
data(){
return{
money:300000,
}
},
methods:{
getSonMoney(money){
// ref 标签的所有属性
this.money+=money
//拿到子组件的money值并计算赋值
this.$refs.son.money-=money
},
getSon2Money(money){
this.money+=money
this.$refs.son2.money-=money
},
getAllMoney(money){
this.money+=2*money
//$children 可以拿到所有子组件，值为一个数组
this.$children.forEach(item => {
item.money-=money
});
},
}
};
</script>
<template>
<div class="Son" >
<button @click="getMoney(100)">向father借钱100元</button>{{ money }}
</div>
</template>
<script>
export default {
name:"Son",
data() {
return {
money:10000,
}
},
methods:{
getMoney(money){
this.money+=money
this.$parent.money-=money
}
}
}
</script>
<template>
<div class="Son2">
<button @click="getMoney(200)">向father借钱200元</button>{{ money }}
</div>
</template>
<script>
export default {
name: 'Son2',
data() {
return {
money: 13000,
}
},
methods:{
getMoney(money){
this.money+=money
//拿到自组件的父组件并计算赋值
this.$parent.money-=money
}
}
}
</script>
6.mixin 混入（混合）
续5
1 将son和son2中相同的部分摘取出来 放在hunhe.js文件中
export default {
// 将son和son2中相同的部分摘取出来 放在hunhe.js文件中
methods: {
getMoney(money) {
this.money += money
this.$parent.money -= money
}
}
}
2 在Son和Son2组件中引入hunhe.js并进行使用
<template>
<div class="Son" >
<button @click="getMoney(100)">向father借钱100元</button>{{ money }}
</div>
</template>
<script>
import hunhe from './hunhe'
export default {
mixins:[hunhe],
name:"Son",
data() {
return {
money:10000,
}
},
}
</script>
<template>
<div class="Son2">
<button @click="getMoney(200)">向father借钱200元</button>{{ money }}
</div>
</template>
<script>
import hunhe from './hunhe'
export default {
mixins:[hunhe],
name: 'Son2',
data() {
return {
money: 13000,
}
},
}
</script>