当前位置：网站首页>Mutual access between components

Mutual access between components

2022-07-19 09:25:00 【_ Semantic error】

Catalog

One 、 Mutual access between parent and child components

1、 Parent access child ref

2、 The child component accesses the parent component

Two 、 Non parent child component communication

One 、 Mutual access between parent and child components

1、 Parent access child ref

Parent access child ： Use $children or $refs （reference quote )
$children

this.$children It's a An array type , It contains all the sub component objects .
$children The defects of ： adopt $children When accessing subcomponents , It's an array type , Access to its subcomponents must be through the index value . But when there are too many subcomponents , When we need to get one of them , It's not always possible to determine its index value , It may even change .

$refs

occasionally , We want to be clear Get one of the specific components , This time can make use $refs（ Mainly in this way ）
$refs Use ：$refs and ref Instructions are usually used together . First , We adopt ref Bind a specific... To a sub component ID, Re pass this.$refs.ID Access this component .

<body>

<div id="app">
  <cpn></cpn>
  <cpn></cpn>

<!--  <my-cpn></my-cpn>
  <y-cpn></y-cpn> -->

  <cpn ref="aaa"></cpn>
  <button @click="btnClick"> Button </button>
</div>

<template id="cpn">
  <div> I am a subcomponent </div>
</template>
<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      message: ' How do you do '
    },
    methods: {
      btnClick() {
        // 1.$children
        // console.log(this.$children);
				// this.$children[0].showMessage()
      /* for (let c of this.$children) {
          console.log(c.name);
          c.showMessage();
        } */
				
				// If you want to get the third  <cpn> Child components , It's troublesome to use subscript value , And if other sub components are inserted in the middle , Like what <my-cpn></my-cpn> Of , I can't get it 
        // console.log(this.$children[3].name);// Not in this way 

        // 2.$refs =>  object type ,  The default is an empty object  ref='bbb'（ This method is generally used ）
				// console.log(this.$refs);//{}
				// console.log(this.$refs.aaa);//VueComponent
        console.log(this.$refs.aaa.name);// It's my sub component name
      }
    },
    components: {
      cpn: {
        template: '#cpn',
        data() {
          return {
            name: ' It's my sub component name'
          }
        },
        methods: {
          showMessage() {
            console.log('showMessage');
          }
        }
      },
    }
  })
</script>

</body>

2、 The child component accesses the parent component

The child component accesses the parent component ： Use $parent（ This is not recommended , Understanding can ）
Although in Vue In development , We are allowed to pass $parent Visit the parent component , But try not to do this in real development .
Subcomponents should try to Avoid direct access to the data of the parent component , Because the coupling is too high .
If we put a sub component in another component , Most likely, the parent component does not have a corresponding property , It often causes problems .
in addition , more The bad thing to do is to pass $parent Modify the state of the parent component directly , Then the state in the parent component becomes erratic , It's not good for my debugging and maintenance .

<body>

<div id="app">
  <cpn></cpn>
</div>

<template id="cpn">
  <div>
    <h2> I am a cpn Components </h2>
    <ccpn></ccpn>
  </div>
</template>

<template id="ccpn">
  <div>
    <h2> I am a subcomponent </h2>
    <button @click="btnClick"> Button </button>
  </div>
</template>

<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      message: ' How do you do '
    },
    components: {
      cpn: {
        template: '#cpn',
       data() {
          return {
            name: ' I am a cpn Component's name'
          }
        },
        components: {
          ccpn: {
            template: '#ccpn',
            methods: {
              btnClick() {
                // 1. Access the parent component $parent
                // console.log(this.$parent);
                // console.log(this.$parent.name);
								//  It is not recommended to use  $parent  In this case, the coupling between parent and child components is too high 
								
                // 2. Access the root component $root,（ Used relatively little ）
                console.log(this.$root);// What I visited was Vue example 
                console.log(this.$root.message);// How do you do 
              }
            }
          }
        }
      }
    }
  })
</script>

</body>

Two 、 Non parent child component communication

Non parent child component relationship Including multiple levels of components , Also include Brother components The relationship between .
stay Vue2.x in , One option is Via the central event bus , That is, an intermediary to complete .
But this scheme and direct use Vuex State management scheme of Still a lot worse . also Vuex Provides more easy-to-use features .

原网站

版权声明
本文为[_ Semantic error]所创，转载请带上原文链接，感谢
https://yzsam.com/2022/200/202207171017355961.html