Vue父子,子父,非父子组件之间传值

  • 2022-07-09 21:20:05

vue组件基础

  • 纯属随笔记录,具体详细教程,请查阅vue.js网站

子组件给父组件传值:

<body>
    <div id="app">
        <my-app></my-app>
    </div>
</body>

<template id="apptem">
    <div>我是---{{ msg }}
        <my-banner @lalala='getdata'></my-banner>
    </div>

</template>

<template id="bannertem">
    <div>我是---

        <button @click='setdata'>这里是轮播图banner</button>
    </div>
</template>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    //定义一个组件
    const banner = {
        template: '#bannertem',
        methods: {
            setdata() {
                this.$emit('lalala', '我是子组件my-banne的值')

            }
        },
    }

//定义一个组件
    const app = {
        template: '#apptem',  //提取组件中的模板
        data() {  //组件的data是一个函数,返回的是一个对象
            return {
                msg: '头部组件',
                a: 212
            }
        },
        components: {
            'my-banner': banner,
        },
        methods: {
            getdata(str) {
                console.log(str);

            }
        }
    }

    const app = new vue({
        el: '#app',
        // data:{

        // },
        components: {
            'my-app': app
        }
    })
</script>

父组件给子组件传值:

<body>
    <div id="app">
        <my-heade></my-heade>
    </div>
</body>
<template id="headetm">
    <div>
        我是heade组件
        <my-banner :bar='msg'></my-banner>
    </div>
</template>

<template id="bannertm">
    <div>
        我是banner组件
        {{ bar }}
    </div>
</template>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    //定义一个banner组件
    const banner = {
        template: '#bannertm',
        props: {
            bar: {
                type: string
            }
        }
    }

    //定义一个heade组件
    const heade = {
        template: '#headetm',
        components: {
            'my-banner': banner
        },
        data() {
            return {
                msg: '我是父组件的值'
            }
        }
    }
    const app = new vue({

        el: '#app',
        components: {
            'my-heade': heade
        }

    })
</script>

非父子组件间传值:

<body>
    <div id="app">
           <my-app></my-app>
    </div>
</body>
<template id="apptm">
    <div>我是最外面的app

        <my-banner></my-banner>
        <my-bannerindex></my-bannerindex>
    </div>
</template>

<template id="bannertm">
        <div>
            这里是banner
            <button @click='getindex(1)'>1</button>
            <button @click='getindex(2)'>2</button>
            <button @click='getindex(3)'>3</button>
            <button @click='getindex(4)'>4</button>
        </div>
    </template>


<template id="barindextm">
    <div>
        {{ index }}
    </div>
</template>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<script>
   
    //***事件总线,也就是实例化一个vue
    const bus=new vue();

   const barindex={
    template:'#barindextm',
    data(){
        return{
           index:''
        }
    },
    mounted() {
        // 2、监听事件
        that=this;
        bus.$on('changeindex',function(index){//(index)=>{this.index=index}
            // console.log(index);
            
            that.index=index;
           
         })
    },
    }

    const banner={
    template:'#bannertm',
    methods: {
        getindex(value){
            bus.$emit('changeindex',value)
        }
    },

}



   const app={
       template:'#apptm',
       components:{
           'my-banner':banner,
           'my-bannerindex':barindex
       }
   }
   
   const app =new vue({
         el:'#app',
         components:{
             'my-app':app
         }
    })

</script> 

猜你喜欢