vue.js父子元素访问

当我们在使用Vue.js开发应用程序时，经常会遇到需要在父组件和子组件之间进行数据传递和通信的情况。Vue.js提供了一些机制来实现这种父子元素的访问:

1. 父向子传递数据（通过props）：

父组件：

<template>
  <div>
    <ChildComponent :message="parentMessage" />
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  data() {
    return {
      parentMessage: 'Hello from parent component',
    };
  },
  components: {
    ChildComponent,
  },
};
</script>

子组件：

<template>
  <div>{{ message }}</div>
</template>

<script>
export default {
  props: ['message'],
};
</script>

2.子向父传递数据（通过自定义事件）：

父组件：

<template>
  <div>
    <ChildComponent @childEvent="handleChildEvent" />
    {{ childData }}
  </div>
</template>

<script> 
import ChildComponent from './ChildComponent.vue';

export default { 
 data() { 
   return { 
     childData: '', 
   }; 
 }, 

 methods: { 
   handleChildEvent(data) { 
     this.childData = data; // 处理子组件传递过来的数据
   }, 
 }, 

 components: { 
   ChildComponent,  
 },  
};   
</script>   

子组件：

<template>  
<button @click="sendToParent">Send Data to Parent</button>   
</template>   

<script>     
export default {    
 methods: {      
   sendToParent() {       
     this.$emit('childEvent', 'Data from child'); // 触发自定义事件，并将数据传递给父组件
   },
 },    
};     
</script>   

3.子向兄弟传递数据（通过共同的祖先组件作为中转站）：

祖先组件：

<template>
  <div>
    <ChildComponentA @sendToSibling="handleSendToSibling" />
    <ChildComponentB :siblingData="siblingData" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      siblingData: '',
    };
  },
  methods: {
    handleSendToSibling(data) {
      this.siblingData = data; // 处理来自子组件A的数据，并传递给子组件B
    },
  },
};
</script>

子组件A：

<template>
  <button @click="sendToSibling">Send Data to Sibling</button>
</template>

<script>
export default {
  methods: {
    sendToSibling() {
      this.$emit('sendToSibling', 'Data from sibling A'); // 触发自定义事件，将数据发送给祖先组件
    },
  },
};
</script>

子组件B：

<template>
  <div>{{ siblingData }}</div>
</template>

<script>
export default {
  props: ['siblingData'],
};
</script>

4.使用$parent访问父级元素：

父级元素：

<template> 
   <div> 
     {{ message }} 
     <ChildComponent /> 
   </div> 
 </template> 
 
 <script>  
 import ChildComponent from './ChildComponent.vue'; 
 
 export default {  
   data() {   
     return {    
       message: 'Hello from parent component',    
     };   
   },   
   components: {    
     ChildComponent,  
   }, 
 };  
 </script> 

子组件：

<template> 
  <div>{{ $parent.message }}</div> 
</template>

5.使用$children访问子级元素列表：

父组件： 

<template>
  <div>
    <ChildComponentA />
    <ChildComponentB />
  </div>
</template>

<script>
import ChildComponentA from './ChildComponentA.vue';
import ChildComponentB from './ChildComponentB.vue';

export default {
  components: {
    ChildComponentA,
    ChildComponentB,
  },
};
</script>