vue中组件间多种传值方式案例详解

// 父组件往子组件传值，父组件定义数据
let App = {
    data(){
        return {
            name:'景浩'
        }
    },
    // 在模板中定义属性实现静态传值 <Vheader ff="123"></Vheader> 静态传值
    template:
    `<div class="App">
        <Vheader ff="123"></Vheader>
        <Vcontent></Vcontent>
    </div>`,
    components: {
        Vheader,
        Vcontent
    }
}

let Vheader = {
    //组件的属性必须用函数方式来写
    data(){
        return{
            nav_lst: ['个人中心','登录','注册']
        }
    },
    //在子组件中接收父组件传来的值
    template: `<div>
                <h1>{{nav_lst}}</h1>
                <h2 style="color: mediumvioletred">{{ff}}</h2>
                </div>`,
    props: ['ff'],
};

    // 父组件往子组件传值，父组件定义数据
    let App = {
        data(){
            return {
                name:'景浩'
            }
        },
        // 在模板中定义属性实现静态传值 <Vheader ff="123"></Vheader> 静态传值
        template:
        `<div class="App">
        <!-- //静态传值-->
<!--            <Vheader ff="123"></Vheader>-->
            <!--动态传值，通过v-bind的方式，变量名前面加冒号-->
            <Vheader :ff="name"></Vheader>
            <Vcontent></Vcontent>
        </div>`,
        components: {
            Vheader,
            Vcontent
        }
    }

<Vheader @fatherHandler="appFatherHandler"></Vheader> 

data(){
    return {
        name:'景浩和灵鸽',
        son_data:''
    }
},
template:
`<div class="App">
    //自定义事件
    <Vheader @ffunc="receive_data"></Vheader>  
    <Vcontent></Vcontent>
    <!--   父组件展示子组件传来的值-->
    <h1>子组件传来的值{{son_data}}</h1>
</div>`,
//父组件定义方法，带一个参数，用来接受子组件传来的值
methods:{
    receive_data(val){
        //在这里将从子组件传过来的值，赋值给父组件中的son_data属性
        this.son_data = val
    }
}

    //在子组件中定义一个点击事件，用来触发传值动作
            //组件的属性必须用函数方式来写
    data(){
        return{
            nav_lst: ['个人中心','登录','注册'],
            //将子组件的这个header_num传给父组件
            header_num: 80
        }
    },
  template: `<div>
                <h1>{{nav_lst}}</h1>
                <button @click="zouni">chuanzhi</button>
                </div>`,
    //用方法定义传值逻辑，必须使用this.$emit()方法传值
    methods:{
        //方法的第一个参数是父组件中定义的事件名称，第二个是子组件的属性
        zouni(){
            this.$emit('ffunc', this.header_num)
        }
    }

let bus = new Vue()

let Vheader = {
    //组件的属性必须用函数方式来写
    data(){
        return{
            nav_lst: ['个人中心','登录','注册'],
            //平行组件传值
            header_num: 100
        }
    },
    //
    template: `<div>
                <h1>{{nav_lst}}</h1>
                <button @click="zouni">chuanzhi</button>   通过点击触发传值
                </div>`,
    //在加载的时候，就把属性值放到对象bus中，使用created不能传值
    // created(){
    //     //往公交车上放值，用$emit()
    //     console.log(1111)
    //     bus.$emit('header_data',this.header_num);
    // },
    methods:{
        zouni(){
            bus.$emit('header_data',this.header_num);   在加载的时候，就把属性值放到对象bus中，放值用$emit()
        }
    }
};

//平行组件拿值，用$on()
let Vcontent = {
    //组件的属性必须用函数方式来写
    data(){
        return{
            content_lst: ['xx', 'oo'],
            content_num: 200,
            head_num:''   这里存放平行组件传来的值，没传值时为空
        }
    },
    //组件要有自己的标签，用标签将组件自己的属性包裹起来
    template: `<div>
                <h1 style="color: seagreen">{{content_lst}}</h1>
                <h1>平行组件传来的值{{head_num}}</h1>
                </div>`,
    created() {
        //以键的形式取值，记得使用this的时候要用箭头函数改变指引，指向vue对象
       bus.$on('header_data',val =>{
           console.log(val)
           this.head_num = val
       })
    }
};