vue $children

官方地址：vm.$children只读详细：当前实例的直接子组件。需要注意$children并不保证顺序，也不是响应式的。如果你发现自己正在尝试使用$children来进行数据绑定，考虑使用一个数组配合v-for来生成子组件，并且使用 Array 作为真正的来源。范例<!DOCTYPE html><html lang="...

安果移不动

3818人浏览 · 2019-03-04 15:49:48

安果移不动 · 2019-03-04 15:49:48 发布

官方地址：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>

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^