vue组件之间通信

1、父组件调用子组件（组件的封装和调用）

• Import 导⼊⼦组件
• components注册⼦组件
• 注册的⼦组件当做标签来使⽤

######### zi.vue ########
<template>
    <div>
            <p>我是子组件</p>
    </div>
</template>

父组件中调用子组件

######### fu.vue #########
<template>
    <div>
    	<- 将注册的子组件当作标签使用->
        <zi></zi>
        <p>我是父组件</p>
    </div>
</template>

<script>
// 导入子组件
import zi from './zi'
export default {
   // 注册子组件
    components:{
        zi
    },
}
</script>

2、父组件给子组件传参

• ⽗组件⾥的⼦标签⾥写上要传递的数据 （：⼦组件的参数名字=⽗组件的参数名字）
• 在⼦组件⾥注册参数（pros）
• 使⽤⽗组件传过来的参数

###################  zi.vue ####################

<template>
    <div>
            <p>我是子组件</p>
            {{str}}
    </div>
</template>

<script>

export default {
    props: {
        str: '',   // 注册参数 str
    },
}
</script>

##########################  fu.vue   ##################33
<template>
    <div>
    	<- 标签中把注册的参数当作属性，传递信息 ->
        <zi :str="str"></zi>
        <p>我是父组件</p>
        {{str}}
    </div>
</template>

<script>
import zi from './zi'
export default {
    components:{
        zi
    },
    
    data() {
        return {
             str: '给子组件传递信息'
        }
    },
    methods: {

    },
    created() {

    }
}
</script>

3、子组件给父组件传递数据

• ⼦组件⾥先⽤特定的⽅法来把数据传递给⽗组件（ this.$emit(“⽅法的名字”，要传递的数据)）
• ⽗组件的⼦标签⾥来接收数据（@⼦组件的⽅法 = ⽗组件的⽅法）
• 在methods⾥接收传过来的val并赋值。

#######################  zi.vue ###########################

<template>
    <div>
            <p>我是子组件</p>
           <- 在子组件中创建一个按钮，给按钮绑定一个点击事件send_fu ->
            <button @click="send_fu">给父组件传递信息</button>
    </div>
</template>

<script>
export default {
    data() {
        return {
            data: '给父组件'
        }
    },
    methods: {
     //  在响应该点击事件的函数中使用 $EMIT 来触发一个自定义事件chang_fu，并传递一个参数data
        send_fu(){
            this.$emit('chang_fu', this.data)
        }
    },
}
</script>
####################### fu.vue  #########################
<template>
    <div>
     <!-- 在父组件中的子标签中监听该自定义事件并添加一个响应该事件的处理方法 -->
        <zi  @chang_fu="getzi"></zi>
        <p>我是父组件</p>
    </div>
</template>

<script>
import zi from './zi'
export default {
    components:{
        zi
    },    
    data() {
        return {
            data: ''
        }
    },
    methods: {
    	// 在methods⾥接收传过来的val并赋值。
        getzi(val){
            console.log(val)
            this.data = val
        }
    },
}
</script>