官方地址：​​vm.$children​​

  • 只读
  • 详细：
    当前实例的直接子组件。需要注意 ​​$children​​ 并不保证顺序，也不是响应式的。如果你发现自己正在尝试使用 ​​$children​​ 来进行数据绑定，考虑使用一个数组配合 ​​v-for​​ 来生成子组件，并且使用 Array 作为真正的来源。
  • 范例
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/4.2.0/normalize.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.4/vue.js"></script>
    <title>Title</title>
    <style>
        #app {
            margin: 1em;
            font-size: 1.2em;
        }

        .component div {
            margin-bottom: 1em;
        }
    </style>
</head>
<body>
<div id="app">
    <my-component :parent-msg="msg"></my-component>

    <hr>
    <div>{{msg}}</div>

</div>
<script type="text/x-template" id="my-component">
    <div class="component">
        <div>ParentMsg:{{parentMsg}}</div>
        <div>ChildMsg:{{msg}}</div>
    </div>
</script>
<script>
    //register
    Vue.component('my-component', {
        props: ['parentMsg'],
        template: '#my-component',
        data: function () {
            return {
                msg: 'Msg of Child'
            }
        }
    });
    //a root instance
    new Vue({
        el: '#app',
        data: {
            msg: 'Msg of Parent!',
        },
        mounted() {
            console.log('$children',this.$children[0].msg)
        }
    });
</script>
</body>
</html>