第二十五篇组件通信 - 间接

前面几篇内容讲到了组件与组件之间的通信时无法进行直接的通信，知道组件其实是一种孤岛，无法直接访问外部组件的状态或者方法，但是能够间接的使用组件通信来进行组件与组件之间的通信；

通过代码和演示效果来进一步了解：

（完成上面的效果，将对应拿到的数据显示出来！）


<div id="app">
    <child1 @mychild1 = "handleClick1" :child-two="child2">child1>   
    <child2 @mychild2 = "handleClick2" :child-one="child1">child2>   
div>
<script>
    Vue.component("child1",{
        props:['childTwo'],
        template:`
            
                 组件1 -- child1
                 组件1数据： {{child1}}
                 拿到组件2数据： {{childTwo}}

`,
data(){
return{
child1:'child1_Data'
}
},
methods:{
handleClick(){ this.$emit("mychild1",this.child1) }
}
})
Vue.component("child2",{
props:['childOne'],
template:`
组件2 -- child2
组件2数据： {{child2}}
组件1数据： {{childOne}}

data(){

return{

child2:'child2_Data'

}

},

methods:{

            handleClick(){ this.$emit("mychild2",this.child2) }

}

})

new Vue({

el:'#app',

data:{

            child1:'', // 存放child1数据

            child2:''  // 存放child2数据

},

methods:{

handleClick1(opt1){

                this.child1 = opt1  // 赋值给child1

                console.log(opt1,this.child1)

},

handleClick2(opt2){

                this.child2 = opt2  // 赋值给child2

                console.log(opt2,this.child2)

}

})

script>

这样一来就实现了组件与组件之前的通信，在编写的时候就能知道并没有直接将数据送来另外一个组件当中去，而是通过中间的一个桥梁实现组件与组件之前的一个通信，上述代码很多看起来有些乱糟糟，没关系，再用一个图简单化，无非就是利用父传子和子传父一同实现这个操作；

通过以上这个图更加了解这是一个怎样的过程来实现组件与组件之间的通信；当然种方式存在着一定的缺陷，这个后续的篇目会讲到这个问题。

综合案例

前面讲过内容的渐进性，这次的小案例也不例外，结合之前的内容来进行一个综合小案例，将之前的内容进行回顾以及结合新内容；下面是将要完成的需求：

这里请求数据使用axios的内容就不讲解关于数据如何来请求，使用的依然是上次在讲fetch请求和 axios使用讲过，这里附上对应的地址，忘了可以回去看一下，温故而知新嘛！

附上链接：

上面的图解内容已经比较清晰了，现在开始来编写相应的代码展示效果，为了简化让你看到更加清晰，将对应的css去掉了，思路看起来会比较清楚：


<div id="app">
    <button @click="sendRequest"> axios请求 button>
    
    <film :myhot="hot"  @mydetail="getFilmInfo">film>
    <detail :film-detail="filmInfo">detail>
div>
<script>
    Vue.component("film",{
        props:['myhot'],
        template:`
            <div>
                <p>热门电影p>
                <div v-if="myhot.length===0">
                    <p>请先发送axios请求...p>
                div>
                <div v-else v-for="item in myhot" :key="item.id">
                    <img :src="item.img" alt="img" >
                    <div>
                        <span>影片:《{{item.nm}}》span>
                        <span>{{item.desc}}span>
                        <button @click="getDetail(item)">点击详情button>
                    div>
                div>
            div>
        `,
        data(){
            return{
                info:''
            }
        },
        methods:{
            getDetail(item){
                this.info = item.videoName
                this.$emit("mydetail",this.info);
            }
        }
    })
 
    Vue.component("detail",{
        props:['filmDetail'],
        template:`
            <div>
                <p>简介：p>
                <p>   {{filmDetail}}p>
            div>
        `
    })
 
    new Vue({
        el:'#app',
        data:{
            hot:[],
            filmInfo:'热门电影预告通知!'
        },
        methods:{
            sendRequest(){
                axios.get('axios.json')
                    .then(res=>{
                        console.log(res.data)
                        this.hot = res.data
                    })
            },
            getFilmInfo(info){
                console.log(info)
                this.filmInfo = info
                // console.log(filmInfo)
            }
        }
    })
script>

未发送数据请求时页面显示：

点击 "axios请求" 按钮发送请求：

点击 "点击详情" 可以看到该电影的简介：

以上就是使用了之前篇目讲的知识点内容以及本篇内容知识点内容做的一个综合小案例，也让我们了解了组件与组件之间的一种通信方式，但是会发现这种方式有一定的缺陷，如当有多个组件需要这样进行往返的通信，是不是会发现这样子的通信貌似像是一场灾难，那么在下篇的内容就让我们一同来解决这样的一个问题，拯救这次灾难吧！感谢大家的支持！

第二十五篇 组件通信 - 间接

综合案例

第二十五篇组件通信 - 间接