2-8 vue全局属性

vue全局属性

父子组件之间相互访问

• 在开发中，组件之间需要相互访问。比如：父组件访问子组件，子组件访问父组件，或者是子组件访问根组件。

• 针对这种情况，Vue.js提供了以下API:

  父组件访问子组件：使用$children或$refs(一个对象，其中包含了所有拥有 ref 注册的子组件。)

  子组件访问父组件：使用$parent

  子组件访问根组件：使用$root

1.$children

• $children

• 运行结果：

vueb6.png

在父组件中，通过this.$children可以访问子组件；this.$children是一个数组，它包含所有子组件的实例。

2.$ref

• $ref

• 在子组件上使用ref属性，可以给子组件指定一个索引ID；通过这个ID我们可以拿到这个组件。

• 绑定在一般元素上时，ref 指DOM元素，绑定在组件上时，ref 为一组件实例。

• 案例代码如下：

• 在父组件中，则通过$refs.索引ID访问子组件的实例

• $parent

• 代码如下：

'first-component': {
               template: '#first-component',
               data:function () {
                   return {
                       content: '我是子组件1'
                   }
               },
               methods: {
                   printParentComponent: function () {
                       console.log(this.$parent.$el);
                   }
               }
           }

• 运行结果：

vueb7.png

• 注意事项：

尽管子组件可以访问父链上任意的实例，不过子组件应当避免直接依赖父组件的数据，尽量显式地使用 props 传递数据。

另外，在子组件中修改父组件的状态是非常不提倡的做法，因为：这让父组件与子组件紧密地耦合；只看父组件，很难理解父组件的状态。因为它可能被任意子组件修改！理想情况下，只有组件自己能修改它的状态。