props
父级:
父级组件中引用子组件, 并将自己 data 下面的 giveChild 数据绑定在 giveChildData 传给子
<myChild :giveChildData="giveChild">{{isMe}}</myChild>
- data(){
- return{
- giveChild:'222'
- }
- },
- components:{ myChild
- }
子级:
通过 props 接收父级传来的数据
- props:{
- giveChildData:{
- type:String
- }
- }
子组件将接收到的数据显示在自身模板中
<div>{{giveChildData}}</div>
效果:
$emit
子元素上的点击事件成功后, 通过 $emit 将事件和数据发射出去
- <div @click="sendChildData"> 点我将子的数据传给父级 </div>
- data(){
- return{
- childData:111
- }
- },
- methods:{
- sendChildData(){
- this.$emit('sendChildData',this.childData)
- }
- }
父级:
父级接收到事件后, 走自己的事件 getChildData 并进行相关处理, 显示.
- <myChild :giveChildData="giveChild" @sendChildData="getChildData"></myChild>
- <div > 这是子级传过来的数据 --> {{isMe}}</div>
- data(){
- return{
- giveChild:'222',
- isMe:''
- }
- },
- methods:{
- getChildData(data){
- this.isMe = data;
- }
- },
- components:{
- myChild
- }
效果: 子把自己的 childData 传给了父级
来源: http://www.bubuko.com/infodetail-3117472.html