vue组建通信

父组件

<template>
    <div>
      <zi :str="str" @change_fu="getzi"></zi>
      <button @click="change_zi()">修改子组件的数据</button>
      {{data}}
    </div>
</template>

<script>
  import zi from './zi'
    export default {
      components:{zi},
      data(){
        return{
          str:'',
          data:{},
        }
      },
      methods:{
        change_zi(){
          this.str = '我是你爹，让你干啥你干啥'
        },
        getzi(val){
          console.log(val)
          this.data = val
        }
      }
    }
</script>

<style scoped>

</style>

子组件

<template>
    <div>
      <li>
        <ul>ddddddddddhffyftdvhftgiugu</ul>
        {{str}}
        <button @click="send_fu()">孝敬父亲</button>
      </li>
    </div>
</template>

<script>
    export default {
      props:['str'],
      data(){
        return{
          data:{'name':'pp'}
        }
      },
      methods:{
        send_fu(){
          console.log(this.data)
          this.$emit('change_fu',this.data)
        }
      }
    }
</script>

<style scoped>

</style>

⽗⼦组件的调⽤：

Import 导⼊⼦组件

compants注册⼦组件

注册的⼦组件当做标签来使⽤

 

⽗组件给⼦组件传参：

⽗组件⾥的⼦标签⾥写上要传递的数据 （：⼦组件的参数名字=⽗组件的参数名字）

在⼦组件⾥注册参数（props）

使⽤⽗组件传过来的参数

 

⼦组件给⽗组件传参：

⼦组件⾥先⽤特定的⽅法来把数据传递给⽗组件（ this.$emit("⽅法的名字"，要传递的数据)

）

⽗组件的⼦标签⾥来接收数据（@⼦组件的⽅法 = ⽗组件的⽅法）

在methods⾥接收传过来的val并赋值。