vuecli中，父组件调用子组件的请求方法

如题，是一个嵌套组件（子组件放在tabs栏内进行切换显示），遇到了一个问题，需要点击父组件左侧的tree得到code码，把code码传递到子页面，使用父子传值，实现了传递数据，也可以实时更新。但是有个问题就是当在父组件点击tree的时候，子组件得到了最新的code码，却不能拿着最新的code码去查询，也就是事件无法再次触发，问大家该怎么在父组件调用到子组件的方法，实现数据的实时更新！

解决方案 »

  1.   

    子组件watch父组件传递来的props属性，来调用子组件的方法。
    即父组件的props属性一变，子组件的方法就被调用，相当于主动调起子组件的方法
      

  2.   


    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
        <!-- 引入样式 -->
        <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    </head>
    <body>
        <div id="app">
            <my-parent></my-parent>
        </div>
    </body>
    <!-- 先引入 Vue -->
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script>
        var MyChild = {
            watch:{
                a(){
                    this.childMethod()
                }
            },
            props:{
                a:{
                    default:""
                }
            },
            template: '<div>{{a}}</div>',
            methods:{
                childMethod(){
                    console.log("我是子组件方法，我被调起了")
                }
            }
        }
        var MyParent = {
            data: function () {
                return {
                    pName:"p1"
                }
            },
            template: '<div><h3>1</h3><my-child :a="pName"></my-child></div>',
            components:{
                "my-child":MyChild
            },
            created(){
                setInterval(() => {
                    this.pName = `p${Math.floor(Math.random() * 100)}`
                    //相当于每秒调起子组件方法
                },1000)
            }
        }
        new Vue({
            el: '#app',
            data: function () {
                return {            }
            },
            methods: {
                
            },
            components:{
                "my-parent":MyParent
            }
        })
    </script>
    </html>