关于前端:vue-20-组件传值2

形容

1. 调用子组件的时候定义一个 ref

<v-header ref="header"></v-header>        

2. 在父组件外面通过

this.$refs.header. 属性
this.$refs.header. 办法 

子组件被动获取父组件的数据和办法：

this.$parent. 数据
this.$parent. 办法 

父组件

<template>
    <div id="father">
        <slider-header ref="header"></slider-header>
        <hr>
         首页组件
        <button @click="getChildData()"> 获取子组件的数据和办法 </button>
    </div>
</template>

<script>
    import SliderHeader from './SliderHeader.vue';// 引入子组件
    export default{data(){
            return { // 父组件的值
               msg: '我是一个 father 组件',
               title: '首页'
            }
        },
        components:{'slider-header': SliderHeader// 绑定子组件},
        methods:{getChildData(){
                // 父组件被动获取子组件的数据和办法：console.log(this.$refs.header.msg);
            }
        }
    }
</script>

<style lang="scss" scoped>
    /*css scoped 设置 部分作用域  */
    h2{color:red} 
</style>

子组件 Header

<template>
    <div>
        <h2> 我是头部组件 --{{msg}}</h2>
        <button @click="getParentData()"> 获取子组件的数据和办法 </button>
    </div>
</template>

<script>    
export default{data(){
        return{msg: '子组件的 msg'}
    },
    methods:{getParentData(){
                // 子组件被动获取父组件的数据和办法：console.log(this.$parent.msg);
            }
    }
}
</script>