子组件
<template>
<div>
<h2>商品名称:{{title}},商品个数{{count}}, 操作:<button @click="countins" >+1</button></h2>
</div>
</template>
<script>
export default {
name:'Fruit',
data() {
return {
count:0
}
},
methods:{
countins(){
this.$emit('count-change')
this.count++;
}
},
// 简单声明接收
props:['title']
// 接收的同时对数据进行类型限制
/* props:{
name:String,
age:Number,
sex:String
} */
// 接收的同时对数据进行类型限制 + 指定默认值 + 限制必要性
// props:{
// name:{
// type:String,
// required:true,
// },
// age:{
// type:Number,
// default:99
// },
// sex:{
// type:String,
// required:true
// }
// }
}
</script>
父组件
<template>
<div>
<Fruit
v-for="product in products" :key="product.id"
:title="product.title"
@count-change="totalCount++"
></Fruit>
<h2>总数为:{{totalCount}}</h2>
</div>
</template>
<script>
import Fruit from './Fruit.vue'
export default {
name:'Shop',
components: { Fruit },
data(){
return{
products:[
{
id:"1",
title:"苹果一斤"
},
{
id:"2",
title:"橘子两斤"
},{
id:"3",
title:"香蕉三斤"
},
],
totalCount:0
}
}
}
</script>
router/index.js
import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import Shop from '@/components/Shop'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/Shop',
name: 'Shop',
component: Shop
},
{
path: '/',
name: 'HelloWorld',
component: HelloWorld
}
]
})
页面效果
当前问题:
1子组件只提供了+1操作,+10或者+5操作不支持即还未实现通过$emit()实现传递参数
2.父组件中监听函数写在了标签内,如果有逻辑操作那么不利于维护
优化后如下
子组件
<template>
<div>
<h2>商品名称:{{title}},商品个数{{count}},
操作:<button @click="countins1" >+1</button><button @click="countins5" >+5</button></h2>
</div>
</template>
<script>
export default {
name:'Fruit',
data() {
return {
count:0
}
},
methods:{
countins1(){
this.$emit('count-change',1)
this.count++;
},
countins5(){
this.$emit('count-change',5)
this.count+=5;
}
},
// 简单声明接收
props:['title']
// 接收的同时对数据进行类型限制
/* props:{
name:String,
age:Number,
sex:String
} */
// 接收的同时对数据进行类型限制 + 指定默认值 + 限制必要性
// props:{
// name:{
// type:String,
// required:true,
// },
// age:{
// type:Number,
// default:99
// },
// sex:{
// type:String,
// required:true
// }
// }
}
</script>
父组件
<template>
<div>
<!-- <Fruit
v-for="product in products" :key="product.id"
:title="product.title"
@count-change="totalCount+=$event" 在标签内部监听子组件中的自定义事件,可以通过$event获取子组件传递的数据
></Fruit> -->
<Fruit
v-for="product in products" :key="product.id"
:title="product.title"
@count-change="onCountChange"
></Fruit>
<h2>总数为:{{totalCount}}</h2>
</div>
</template>
<script>
import Fruit from './Fruit.vue'
export default {
name:'Shop',
components: { Fruit },
data(){
return{
products:[
{
id:"1",
title:"苹果一斤"
},
{
id:"2",
title:"橘子两斤"
},{
id:"3",
title:"香蕉三斤"
},
],
totalCount:0
}
},
methods:{
onCountChange(productCount){
// 在方法内部执行就可以使用$event了,因为不在标签内部,页面不会为我们转化标签,
//因此需要通过参数的方式接受event(子组件传递的参数)
this.totalCount+=productCount
}
}
}
</script>
通过v-model实现子组件向父组件传值
子组件
<template>
<div>
<!-- <input type="text" :value="value" @input="$emit('input',$event.target.value)">
标签书写方式 其中@input是指的input输入框事件,'input'是事件名称,$event.target是指定获取当前事件元素即input标签 -->
<input type="text" :value="value" @input="onInput">
</div>
</template>
<script>
export default {
name:'IpvalueChild',
// 简单声明接收
props:['value']
,methods:{
onInput(event){//在代码中需要自己接受event事件
this.$emit('input',event.target.value)
}
}
// 接收的同时对数据进行类型限制
/* props:{
name:String,
age:Number,
sex:String
} */
// 接收的同时对数据进行类型限制 + 指定默认值 + 限制必要性
// props:{
// name:{
// type:String,
// required:true,
// },
// age:{
// type:Number,
// default:99
// },
// sex:{
// type:String,
// required:true
// }
// }
}
</script>
父组件
<template>
<div>
<p>输入的内容是:{{ipvalue}}</p>
<ipvalue-child v-model="ipvalue"></ipvalue-child>
</div>
</template>
<script>
import IpvalueChild from './IpvalueChild.vue'
export default {
name:'Ipvalue',
components: { IpvalueChild },
data(){
return{
ipvalue:''
}
}
}
</script>
页面效果
知识补充:
1.当子组件数据变化时,通过$emit('事件名','传递的数据')触发自定义事件用于注册事件,
父组件使用@自定义事件 获取子组件传递的数据
2.v-model用于组件时,仍然需要通过props与自定义事件实现,但是绑定参数v-model帮我们实现了