回答

如果是cdn vue方式编写的代码，可以这样实现子组件之间的通讯及父子组件之间的通讯，代码如下：

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum=1.0,minimum=1.0,user-scalable=0" />
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/vue@2.6.1-dev.js"></script>

    <style>
        .comment-box{
        padding: 5px 10px;
        border: 1px solid grey;
        margin:5px;
        }
        .reply{
        color: red;
        font-weight: bold;
       
        }
    </style>
</head>

<body>

    <div id="app">

        <div id="comment">
            <Reply :commentdata="comments" v-on:replyit="replyit"></Reply>
        </div>
         <Comment ref="child" :towho="towho" v-on:sendit="sendit"></Comment>
        
     
    </div>
    <script type="text/javascript">
         Vue.component('Comment',{
            template: '   <form><input :placeholder="towho"  /><input @click="sendit" type="button" value="回复" /></form>',
            props: ['towho'],
            data: function () {
                return {
           
                };
            },
            mounted: function () {
           
            },
            methods: {
                sendit(){
           
                    this.$emit('sendit', "小王");
           
                },
                clean(){
                    alert("clear");
                }
            }
        });
   
        Vue.component('Reply',{
            template: '<div><div class="comment-box" v-for="item in commentdata"><span>{{item.nickname}}说</span> <span>{{item.content}}</span> <span @click="replyit(item.id,item.nickname)" class="reply">回复</span><Reply v-bind="$attrs" v-on="$listeners" v-if="item.replyComments" :commentdata="item.replyComments" ></Reply></div></div>',
            props: ['commentdata'],
            data: function () {
                return {
           
                };
            },
            mounted: function () {
           
            },
            methods: {
                replyit(toid,touser){
           
                    this.$emit('replyit', [toid,touser]);
           
                }
            }
        });
        new Vue({
            el: '#app',
            components: { // 不需要注册也能使用
            },
            mounted: function () {
                console.log("vue挂载完成");
               this.$refs.child.clean();
            },
            data: {
                towho:"",
                touser:"",
                toid:"",
                comments: [{
                "id": 1,
                "pid": 0,
                "nickname": "张三",
                "content": "你们好",
               
                "createTime": "2020-04-12T06:32:20.613+0000",
                "replyComments": [{
                "id": 2,
                "pid": 1,
                "nickname": "李四",
                "content": "你好",
               
                "createTime": "2020-04-12T06:32:31.699+0000",
                "replyComments": []
                }]
                },
                {
                "id": 3,
                "pid": 0,
                "nickname": "王五",
                "content": "猪吗？",
               
                "createTime": "2020-04-12T06:34:37.146+0000",
                "replyComments": [{
                "id": 4,
                "pid": 3,
                "nickname": "赵六",
                "content": "？？",
               
                "createTime": "2020-04-12T07:03:47.873+0000",
                "replyComments": [{
                "id": 5,
                "pid": 4,
                "nickname": "老李",
                "content": "你们在耍啥",
               
                "createTime": "2020-04-12T07:03:47.873+0000",
                "replyComments": []
                }]
                }]
                },
                ]
            },
            methods: {
                sendit(data){
                    alert(data);
                },
                replyit(data){
                    this.towho="回复"+data[1];
                    this.touser="回复"+data[1];
                    this.toid=data[0];
                },
                clean(){
                    this.$refs.Comment.clean();
                }
                
            }
        });
    </script>
</body>

</html>