共计 922 个字符，预计需要花费 3 分钟才能阅读完成。
形容
-
父组件调用子组件的时候 绑定动静属性
<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>
正文完
