Vue 父子组件传值

一般props down 和 events up

父传子
1.先给父组件中绑定自定义属性
2.在子组件中使用props接收父组件传递的数据
3.可以在子组件中任意使用

<nav-bar title="新闻详情"></nav-bar>

<template>
<div class="cms-s-header">
<h5 @click="goback" class="back">返回</h5>
<h4 class="page-title">{{ title }}</h4>
</div>
</template>
<script>
export default {
name: 'nav-bar',
props: ['title'],
methods: {
goback () {
this.$router.go(-1)
}
}
}
</script>

子传父
1.在父组件中绑定自定义事件，
2.在子组件中触发原生的事件，在函数中使用$emit触发自定义的事件
$emit(事件名，信息)

<template>
<div>
<FtoC v-bind:msg="text" v-on:listenevent="show"></FtoC>
{{ showtext }}
</div>
</template>

<script>
export default {
data () {
return {
text: '信息',
showtext: '原始数据'
}
},
methods: {
show: function (data) {
this.showtext = data //冒泡接受事件以及参数
}
}
}
</script>

<template>
<div>
{{ msg }}
<button @click="postmsg">向父组件传值</button>
</div>
</template>

<script>
export default {
name: 'FtoC',
props: ['msg'],
data () {
return {
}
},
methods: {
postmsg: function () {
var n = 1
this.$emit('listenevent', n) // 监听自定义listenevent事件，传递数据n
}
}
}
</script>