父子组件传值

vue组件传值

1.父组件传值给子组件

1. 父组件调用子组件需要动态绑定属性

2. 在子组件里通过props接受父组件的数据

父组件 News

 <template>
    <div>
        <h1> News Pages</h1>
        {{msg}}
        <hr>
        <br>
        //引入子组件
        <PlayerStats :title="titleMeg"></PlayerStats>
    </div>
</template>

<script>
import PlayerStats from '@/components/Player/Stats'  //引用子组件

export default {
 components:{
       PlayerStats
   },
    data(){
        return{
            titleMeg:'haha',
        }
    }
}
</script>

子组件Stats

<template>
    <div>
       <span> {{title}}</span>//titil 得到父组件数据   haha
    </div>
</template>

<script>
export default {
    props:{
         title:String //props与父组件中的 ：title  对应
    },
    data(){
        return{
        }   
}
</script>

子组件传值给父组件

1. 在Vue中，父子组件的关系可以总结为prop向下传递，事件向上传递。父组件通过prop给子组件下发数据，子组件通过事件给父组件发送信息。
2. 每个Vue实例都实现了事件接口：使用$on(evntName)监听事件；使用$emit(eventName,optionalPayload)触发事件。另外，父组件可以在使用子组件的地方直接用v-on来监听子组件触发的事件。

子组件Stats

 <template>
    <div>
       <input type="text" v-model="msg">
       <input type="button" @click="clk" value="点击发送">//点击事件，触发事件把数据传递给父组件
    </div>
</template>

<script>
export default {
    data(){
        return{
            msg:'我是子组件的数据呀'
            }
        },
        methods:{
            clk(){
                this.$emit('fun1',this.msg)//fun1是在父组件中的监听方法，第二个数据是需要传的值
            }
        }
    
}
</script>

父组件News

<template>
    <div>
        <h1> News Pages</h1>
        {{msg}}
        <hr>
        <br>//定义on方法监听子组件的状态
        <PlayerStats  @fun1="mm" ></PlayerStats>//这里是在子组件方法里的this.$emit('fun1',this.msg)中的fun1
    </div>
</template>

<script>
import PlayerStats from '@/components/Player/Stats'  

export default {
    data(){
        return{
            msg:''
        }
    },
   components:{
       PlayerStats
   },
    methods:{
        mm(childValue){//形参a
            this.msg=childValue ///childValue就是传过来的值
        }
    }
}
</script>