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

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> 
posted @ 2019-07-04 20:29 des雷锋 阅读(...) 评论(...) 编辑 收藏