博客

1.父给子 tt（父） son（子）

tt
<template>
    <div>
        付给子
        <Son :msg='msg'></Son>
    </div>
</template>

<script>
    import Son from './Son'
    export default {
        name: "User",
        components: {Son},
        data(){
            return{
                msg:'这是数据'
            }
        },
    }
</script>

son
<template>
    <div>
        父给子
        {{msg}}
    </div>
</template>

<script>
    export default {
        name: "Son",
        props:{
            msg:String
        }
    }
</script>

2. 子给付

tt
<template>
    <div>
        子给{{msg}}父
        <Son @gei="sou"></Son>
    </div>
</template>
<script>
    import Son from './Son'
    export default {
        name: "User",
        components: {Son},
        data(){
            return{
                msg:'',
            }
        },
        methods:{
            sou(msg){
                this.msg=msg;
            }
        }
    }
</script>

son
<template>
    <div>
        子给父
        <input type="text" v-model="xxx"></input>
    </div>
</template>
<script>
    export default {
        name: "Son",
        data(){
            return{
                xxx:''
            }
        },
        watch:{
            xxx(){
                this.$emit("gei",this.xxx);
            }
        }
    }
</script>

3.路由传参

tt
<template>
    <div>
        <h1>page1</h1>
        <router-link :to="{name:'son',params:{'id':this .id}}">son</router-link>
        <br>
        <p>{{msg}}</p><br>
        <h1> 欢迎回来。{{this.$route.params.num}}</h1>
    </div>
</template>
<script>
    export default {
        data () {
            return {
                msg: "我是page1组件",
                id:1
            }
        }
    }
</script>


son

<template>
    <div>
        <h1>page2</h1>
        <router-link :to="{name:'tt',params:{'num':this.num}}">tttttt</router-link>
        <br>
        <p>{{msg}}</p><br>
        <h1> 欢迎回来。{{this.$route.params.id}}</h1>
    </div>
</template>
<script>
    export default {
        data () {
            return {
                msg: "我是page2组件",
                num:2
            }
        }
    }
</script>


 { path: '/tt', name: 'tt', component: () => import('../views/service/tt.vue')},