父组件向子组件传值
流程:
1、父组件中引入子组件
2、在父组件中通过v-bind绑定属性
3、子组件中通过props获取到父组件传递的值
//父组件
<template>
<div class='father' id="app">
<input type="text" v-model="fathermsg">
<h3>这里是父组件</h3>
<children v-bind:msg='fathermsg'></children>//注册Children子组件;v-bind绑定fathermsg挂载到msg
</div>
</template>
<script>
import children from './Children.vue'//引用子组件
export default {
data () {
return {
fathermsg: '父组件向子组件传递的值
}
},
components: { children }//定义一个局部子组件
}
</script>
//子组件
<template>
<div class='children'>
<h3>这里是子组件</h3>
<input type="text" v-model="msg"/>//显示父组件传递的值
</div>
</template>
<script>
export default {
props: {
msg: {//msg 接收父组件传递的值,并做了Prop验证必填的字符串
type: String,
required: true
}
},
methods: {
}
}
</script>
<style lang="less" scoped>
.children{
background-color: aquamarine
}
</style>
上述例子是由父组件的fathermsg通过v-bind绑定挂载到msg上,子组件通过props中的msg(与父组件挂载的变量名称一致)获取,从而实现父组件传值到子组件中
注:通过props向子组件传值的方式属于单方向传递,子组件无法根据传递参数的更改影响父组件
子组件向父组件传值(自定义事件)
流程:
1、在父组件中引入子组件
2、在子组件中$emit()触发父组件的事件
3、父组件在使用子组件的位置使用$on()进行监听子组件触发的事件
子:this.$emit(“function”,param); //其中function为父组件定义函数,param为需要传递参数
//父组件
<template>
<div class='father' id="app">
{{count}}----------{{total]}
//v-on监听子组件$emit()触发的事件,v-on以下用@简写
<children @fatherCounter='fatherCounter'></children>
<children @fatherCounter='fatherCounter'></children>
</div>
</template>
<script>
import children from './Children.vue'
export default {
data () {
return {
count: 0,
total: ''
}
},
methods: {
//fatherCounter为子组件触发的父组件方法,params为子组件传递的参数
fatherCounter (params) {
this.count++
this.total = params
}
},
components: { children }
}
</script>
<style scoped>
</style>
//子组件
<template>
<div class='children'>
<input type="button" @click="clickCounter" :value="count">
</div>
</template>
<script>
export default {
props: {
},
data () {
return {
count: 0
}
},
methods: {
clickCounter () {
this.count++
let params = '子组件向父组件传递的值'
this.$emit('fatherCounter', params)//触发事件,并传递了一个参数
}
}
}
</script>
<style lang="less" scoped>
.children{
background-color: aquamarine
}
</style>