vue 父子组件之间的传值

vue 父子组件之间的传值

1:父组件向子组件传递数据

//父组件通过标签上面定义传值
<template>
    <Main :obj="data"></Main></template>
<script>

    //引入子组件
    import Main form "./main"

    exprot default{
        name:"parent",
        data(){
            return {
                data:"我要向子组件传递数据"
            }
        },
        //初始化组件
        components:{
            Main
        }
    }</script>

//子组件通过props方法接受数据
<template>
    <div>{{data}}</div>
</template>

<script>
    export default{
        name:"son",
        //接受父组件传值
        props:["data"]
    }</script>

2:子组件向父组件传递数据

//子组件通过$emit方法传递参数
<template>
   <div v-on:click="events"></div>
</template>
<script>
    //引入子组件
    import Main form "./main"

    exprot default{
        methods:{
            events:function(){

            }
        }
    }</script>

<template>
    <div>{{data}}</div>
</template>

<script>
    exprot default{
        name:"son",
        //接受父组件传值
        props:["data"]
    }</script>