在之前的文章讲过全局使用viewModel，也讲过浮动层的viewModel双向绑定，还有讲过通过viewModel绑定方法。

但是，对于viewModel向下传递：子控件bind父控件viewModel中的值，甚至孙子辈控件中的某个属性，bind爷爷辈控件viewModel中的值，效果如下图（子控件也可以更改父辈控件viewModel的值）

在进行传递和改变不同层级viewModel的值，一个重要的方法lookupViewModel([skipThis])

lookupViewModel方法：

控件对象.lookupViewModel([skipThis])；

当[skipThis]为true时，仅向上查找该控件父辈容器中的viewModel ，不考虑自己的viewModel

当[skipThis]为空时 即 控件对象.lookupViewModel()；查找该控件的上级的viewModel

而getViewModel,是仅找自己实例的viewModel，就是说用getViewModel 哪个控件配置了，哪个控件能找到(下面代码有解释)

图中，总共有四层控件：

第一层

最外层container，他具有一个顶层的viewModel,其中IsBrowser字段用于向下传递，以来控制子孙辈控件的状态

 viewModel: {
           data: {
                    IsBrowser: false,
                    FirstTxt: '第一层vm'
           }
 },

 还有三个子控件,其中在子控件的button中 改变IsBrowser的值

items: [{
    xtype: 'component',
    bind: {
        html: '当前是<span style="color:red">{IsBrowser?"浏览态":"新增态"}</style>'
    },
}, {
    xtype: 'button',
    text: '改变状态',
    handler: function (sender) {
        var vm = sender.getParent().getViewModel();//或采用sender.lookupViewModel() 
        //因为viewModel配置在button的上级 所以用getViewModel的话要sender.getParent()
        var isBrowser = vm.get('IsBrowser');
        vm.set('IsBrowser', !isBrowser);
    }
}, {
    xtype: 'container',
    reference:'SecondCt'
}]

第二层

这里的container，就是第一层中的referenceKey为SecondCt的子控件container,他也具有一个viewModel,并且在此用defaultListenerScope来限定作用域，在此作用域里，声明一个方法onShow来进行改变第一层中viewModel中IsBrowser的值。

注意：

在onShow中 this指的是当前的container，当前的container必须通过lookupViewModel方法来进行向上查找

{
    xtype: 'container',
    style: 'border:2px solid red',
    reference:'SencondCt',
    defaultListenerScope: true,
    nameHolder: true,
    referenceHolder: true,
    viewModel: {
        data: {
            SonIsBrowser: false,
                SecondTxt: '第二层vm'
        }
    },
    onShow(sender) {
        const me = this;
        var pvm = me.lookupViewModel(true);//查找父辈的viewModel
        pvm.set('IsBrowser', !pvm.get('IsBrowser'))//通过set 改变第一层中的viewModel中的值
    }
}

 第三层

也就是第二层的子集，里面包含了第四层 就不再赘述

items: [{
    xtype: 'component',
    bind: {
        html: '第三层控件获取到状态<span style="color:red">{IsBrowser?"浏览态":"新增态"}</style>'
    },
}, {
    xtype: 'button',
    text: '第二层内的按钮',
    handler: 'onShow'
}, {
    xtype: 'container',
    style: 'border:2px solid blue',
    defaultListenerScope: true,
    nameHolder: true,
    referenceHolder: true,
    viewModel: {
        data: {
            grandsonIsBrowser: false,
            ThirdTxt: '第三层vm'
        }
    },
    items: [{
        xtype: 'button',
        text: '第三层取值',
        handler: 'onFourthShow'
    }, {
        xtype: 'button',
        bind: {
            text: '第四层<span style="color:red">{IsBrowser?"浏览态":"新增态"}</style>按钮'
        },
        // text
        style: 'border:2px solid green',
        handler: function (sender) {
            var vm = sender.lookupViewModel(true);
            console.log('第四层获取到值：')
            console.log(vm.get('FirstTxt'))
            console.log(vm.get('SecondTxt'))
            console.log(vm.get('ThirdTxt'))
        }
    }],
    onFourthShow(sender) {
        const me = this;
        var pvm = me.lookupViewModel(true); //查找上部所有viewModel
        console.log('第三层获取到值：')
        console.log(pvm.get('FirstTxt'))
        console.log(pvm.get('SecondTxt'))
        console.log(me.lookupViewModel().get('ThirdTxt'))
    }
}],

完整的demo:下载