vue2 与 vue1都支持的组件tree互动api。

来源:互联网 发布:淘宝开店要保证金吗 编辑:程序博客网 时间:2024/06/05 22:34
<div id="app">
    父组件:
    <input v-model="val"><br/>
    子组件:
    <test :test="val"></test>
</div>


<script>
    var vm = new Vue({
        el: '#app',
        data: {
            val: 1
        },
        components: {
            test: {
                props: ['test'],
                template: "<input @click='findParent' v-model='test'/>",
                methods: {
                    findParent: function () {
                        console.log(this.$parent);  //访问根组件
                        console.log(this.$parent.val);  //访问根组件的val属性
                        console.log(this.$parent.$children.indexOf(this));  //查看当前能否在其父组件的子组件中找到索引
                        console.log(this.$parent === this.$root);   //查看父组件和根组件是不是全等的(因为他的父组件就是根组件)
                    }
                }
            }
        }
    });
</script>
0 0