vue.js----父组件向子组件传值，子组件执行父组件方法-蒲公英云

vue.js----父组件向子组件传值，子组件执行父组件方法

1，父组件向子组件传值，可以是：在使用子组件的时候，将需要传递的数据，通过属性绑定的形式，传递给子组件；在子组件中通过props进行接收；可以是数组形式接收，props:[‘val’]；也可以是对象形式接收：props:{ val:{type:”string”,default:”Hello”}} ;

父组件代码：

<template>
<div style="background:red;margin-top:20px;"> 
    <child3 v-bind:msg="val"></child3>
</div>
</template>
<script>
import child3 from './child3'
export default {
data () {
return {
    val:'HelloWorld' 
}
},
components:{
  'child3':child3
} 
}
</script>

子组件代码：

<template>
<div style="background:skyblue;">
    这是父组件传递过来的数据：{
   {msg}}
</div>
</template>
<script>
export default {
data () {
return {}
},
props:['msg']
}
</script>

这样在页面初始化后，父组件中的数据 HelloWorld 将传入到子组件中，但是也只能传递一次；可以在父组件中添加一些事件来改变子组件中的数据；比如添加鼠标点击事件；父组件代码修改之后如下：

<template>
<div style="background:red;margin-top:20px;">
    <button @click="dianwo">点我向子组件传值</button>
    <child3 v-bind:msg="val"></child3>
</div>
</template>
<script>
import child3 from './child3'
export default {
data () {
return {
    val:1 
}
},
components:{
  'child3':child3
},
methods:{
    dianwo(){
      this.val ++
    }
} }
</script>

当在父组件中点击按钮之后，改变val的值，同时，子组件中的值也就改变了；

2，子组件中执行父组件的方法也是使用事件绑定机制，使用 v-on (简写@) 在组件上绑定一个自定义属性之后，子组件中可以通过 this.$emit(“methodName”,val) 方式执行方法，

父组件代码：

<template>
<div style="background:red;margin-top:20px;"> 
    <child3 v-bind:msg="val" @action="fromChild"></child3>
</div>
</template>
<script>
import child3 from './child3'
export default {
data () {
return {
    val:1 
}
},
components:{
  'child3':child3
},
methods:{
    fromChild(val){
        console.log(val)
    } 
} }
</script>

子组件代码；

<template>
<div style="background:skyblue;">
    <button @click="active">点我执行父组件方法</button>
</div>
</template>
<script>
export default {
data () {
return {
}
},
props:['msg'],
methods:{
    active(){
        this.$emit("action","action parent method")
    }
}
}
</script>

说明：在父组件中通过在引入的子组件中绑定了一个action，属性值是 fromChild ，就是该组件中的方法名，即将该组件中的方法传递到子组件中，在子组件中 this.$emit(“action”,”action parent method”) 可以执行自定义事件action, (第一个参数是自定义事件名，第二个参数是传递的参数)；执行 this.$emit(“action”,”action parent method”) 后，会执行自定义事件对应的方法fromChild;