传值(父子、子父)

父组件→子组件
<div class="father">
    <child :inputName="name">
</div>

<div class="child">
    {{inputName}}
</div>
通过props接受数据
(1)props: {
   inputName: String,
   required: true
  }
(2)props: ["inputName"]



子组件→父组件
子组件使用 $emit('方法名','其他参数')传递

子组件:
<input type="button" value="点击触发" @click="childClick">
data:{
    childdata:'hello'
}
methods:{
    childClick(){
        this.$emit('goFather',childdata)
    }
}

父组件:
<child @goFather="fatherFunction"></child>
methhods:{
    fatherFunction(content){
        console.log(content) //content是传递上来的数据
    }
}


父组件调用子组件的方法
父组件:
<div @click="parentMethod">
    <children ref="child"></children>
</div>

this.$refs.child.childMethods(); //childMethods()是子组件中的方法


父子组件之间修改数据

this.$children.msg='123'
this.$parent.msg='456'

 

posted @ 2020-06-24 16:09  Jinsuo  阅读(1157)  评论(0编辑  收藏  举报