关于前端: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>