vue父组件向子组件传值

<template>
    <div id="index">
        <h1>this is index</h1>
        <my-footer :index='this'></my-footer>   <!--将父组件属性方法传入子组件-->
    </div>
</template>

<script>
    import myFooter from './footer'
    export default{
        components:{
            myFooter
        },
        data(){
            return {
                name:'index',
                desc:{
                    title:'this is index',
                    msg:'我是index'
                }
            }
        },
        methods:{
            fun1(data){
                console.log('this is index'+data);
            }
        }
    }
</script>

<template>
    <div id='footer'>
        <h1>{{index.name}}</h1>         <!--获取父组件属性-->
        <a @click='fun2'>触发父组件方法1</a>
        <button @click="index.fun1('123')">触发父组件方法2</button>
    </div>
    
</template>
<script>
    export default{
        props:['index'],        //index可获取父组件所有属性和方法
        data(){
            return {
                name:'footer'
            }
        },
        methods:{
            fun2(){
                this.index.fun1();      //调用父组件方法
            }
        }
    }
</script>