vue父子组件传值

父组件给子组件传值

父组件

<template>
  <div >
    <child msg="父组件给子组件传值" ></child>
  </div>
</template>

子组件

<template>
    <div>
        <span>{{msg}}</span></button>
    </div>
</template>
<script>
export default {
    props:['msg'],
    data(){
        return {}
    },
}
</script>

子组件给父组件传值

子组件

<template>
　　<div> <span>{{childData}}</span> </div>
</template>

<script>
export default {
　　data () {
　　　　return {
　　　　　　childData: '我是子组件的数据'
　　　　 }
　　 },
　　 methods: {
　　　　 childClick () {
　　　　　　 // fun是在父组件on监听的方法 // 
　　　　　　 //第二个参数this.childData是需要传的值
　　　　　　 this.$emit('fun', this.childData)
　　　　}
　　}
}
</script>

父组件

<template>
　　<div> 
　　<child @fun="fun"></child>
　　<div>{{name}}</div>
　　 </div>
</template>

<script>
import child from './child'
export default {
　　components: { child },
　　data () {
　　　　return { name: '' }
　　},
　　methods: {
　　　　fun: function (value) {
　　　　　　// value就是子组件传过来的值
　　　　　　this.name = value
　　　　}
　　}
}
</script>