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

形容

• 父组件调用子组件的时候 绑定动静属性

   <slider-header :title="title"></slider-header>

• 在子组件外面通过 props 接管父组件传过来的数据
• 子组件在应用父组件定义的函数时，能够传参数

父组件

<template>
    <div id="father">
        <slider-header :title="title" :homemsg='msg'  :run="run"  :father="this"></slider-header>
        <hr>
         首页组件   
    </div>
</template>

<script>
    import SliderHeader from './SliderHeader.vue';// 引入子组件
    export default{data(){
            return { // 父组件的值
               msg: '我是一个 father 组件',
               title: '首页'
            }
        },
        components:{'slider-header': SliderHeader// 绑定子组件},
        methods:{run(data){console.log('我是 Father 组件的 run 办法'+data);
            }
        }
    }
</script>

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

子组件 Header

<template>
    <div>
        <h2> 我是头部组件 --{{title}}---{{homemsg}}</h2>
        <button @click="run('10')"> 执行父组件的办法 </button>
        <button @click="getParent()"> 获取父组件的数据和办法 </button>
    </div>
</template>

<script>    
export default{data(){
        return{msg: '子组件的 msg'}
    },
    methods:{getParent(){this.father.run()// 应用父组件办法
        }
    },
    props:['title', 'homemsg', 'run', 'home']
// 引入父组件内容，'title','homemsg' 变量值,'run' 办法,'home' 对象
}
</script>