vue全局属性
父子组件之间相互访问
在开发中，组件之间需要相互访问。比如：父组件访问子组件，子组件访问父组件，或者是子组件访问根组件。
-
针对这种情况，Vue.js提供了以下API:
父组件访问子组件：使用$children或$refs(一个对象，其中包含了所有拥有 ref 注册的子组件。)
子组件访问父组件：使用$parent
子组件访问根组件：使用$root
1.$children
- <strong>$children</strong>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="app">
<parent-component></parent-component>
</div>
<template id="first-component">
<h2>{{ content }}</h2>
</template>
<template id="second-component">
<h3>{{ content }}</h3>
</template>
<template id="parent-component">
<div>
<first-component></first-component>
<second-component></second-component>
<button @click="printAllChildComponent">输出子组件</button>
</div>
</template>
<script src="js/vue.js"></script>
<script>
Vue.component('parent-component', {
template: '#parent-component',
components: {
'first-component': {
template: '#first-component',
data:function () {
return {
content: '我是子组件1'
}
}
},
'second-component': {
template: '#second-component',
data: function () {
return {
content: '我是子组件2'
}
}
}
},
methods: {
printAllChildComponent: function () {
for(var i=0; i<this.$children.length; i++){
console.log(this.$children[i]);
}
}
}
})
new Vue({
el:'#app'
})
</script>
</body>
</html>
- 运行结果：
vueb6.png
在父组件中，通过this.$children可以访问子组件；this.$children是一个数组，它包含所有子组件的实例。
2.$ref
<strong>$ref</strong>
在子组件上使用ref属性，可以给子组件指定一个索引ID；通过这个ID我们可以拿到这个组件。
绑定在一般元素上时，ref 指DOM元素，绑定在组件上时，ref 为一组件实例。
案例代码如下：
<template id="parent-component">
<div>
<first-component ref="fc1"></first-component>
<second-component ref="fc2"></second-component>
<button @click="printAllChildComponent">输出子组件</button>
</div>
</template>
在父组件中，则通过
$refs.索引ID访问子组件的实例<strong>$parent</strong>
代码如下：
<template id="first-component">
<div>
<h2>{{ content }}</h2>
<button @click="printParentComponent">获取父组件</button>
</div>
</template>
'first-component': {
template: '#first-component',
data:function () {
return {
content: '我是子组件1'
}
},
methods: {
printParentComponent: function () {
console.log(this.$parent.$el);
}
}
}
- 运行结果：
vueb7.png
- 注意事项：
尽管子组件可以访问父链上任意的实例，不过子组件应当避免直接依赖父组件的数据，尽量显式地使用 props 传递数据。
另外，在子组件中修改父组件的状态是非常不提倡的做法，因为：这让父组件与子组件紧密地耦合；只看父组件，很难理解父组件的状态。因为它可能被任意子组件修改！理想情况下，只有组件自己能修改它的状态。
