Communication methods in Vue

Communication methods in Vue

1.props/$emit

Parent to child (property transfer props)

When a parent component transmits data to a child component, it transmits data through attributes:
1. Parent component: use attribute binding to transfer data
==Note: = = son refers to the name of the sub component, for example:

This is generally used when referencing child components in parent components;
2. In sub components: receive data with props; For example: props: {search text}
3. Code example:

Code in parent component:

<search-result v-if="isResultShow" :search-text="searchText">

    </search-result>
    <!-- /Search history results -->

    <!-- Lenovo suggestion -->
    <!--
      1. v-else-if="searchText" Otherwise, if there is searchText Show Lenovo suggestions;
      2. :search-text="searchText" Pass the content entered in the search box in the parent component to the child component;
      3. 
    -->
    <search-suggestion :search-text="searchText" 
                       v-else-if="searchText"
                       @search="onSearch">

    </search-suggestion>
    <!-- /Lenovo suggestion -->

     <!-- Search history -->
     <!--
       1. 
     -->
    <search-history v-else 
                    :search-histories="searchHistories"
                    @clear-search-histories="searchHistories = []">

    </search-history>
    <!-- /Search history -->

  </div>
</template>

<script>
  // Import search subcomponent
  import SearchHistory from './components/search-history'
  import SearchSuggestion from './components/search-suggestion'
  import SearchResult from './components/search-result'

  export default {
    name: 'SearchPage',
    components: {
      // Register subcomponents
      SearchHistory,
      SearchSuggestion,
      SearchResult
    },
    props: {},
    data () {
      return {
        // Contents of the search box 
        searchText: '',
        // Control the display of search results (not displayed by default)
        isResultShow: false,
        // Used to store history
        searchHistories: []
      }
    },

Code in subcomponent:

export default {
    name: 'SearchHistory',
    components: {},
    // Note: props data can only be modified and cannot be re assigned (otherwise, the parent component's associated data cannot be synchronized)
    props: {
      searchHistories: {
        type: Array,
        require: true
      }
    },
  1. Steps for transferring values from parent to child:
    1. Bind the attribute in the child component tag of the parent component; (the parent component must first reference the child component and register the child component in components)
    2. In the sub component, props is used to receive the data transmitted from the parent component;
      Note: props data can only be modified and cannot be re assigned (otherwise, the parent component's associated data cannot be synchronized);
      props can only be used to pass values from parent to child;
Child to parent ($emit)

When using a component, all attribute names and event names belong to the child component, and attribute values and event methods belong to the parent component;
(that is, only attribute name and event name are defined in the child component, and attribute value and event method are defined in the parent component.)

  1. vm. o n Bind set matter piece ; v m . on binding event; vm. on binding event; vm.once binding; vm. o f f solution Bind matter piece ; v m . off unbinding event; vm. off unbinding event; vm.emit trigger event;
  2. Bind some events to the father, and the son will pass the data when triggering the event;
  3. One way data flow: the father data is refreshed, and the son data is refreshed:
  4. The attribute value (method) is the father's and the attribute is the son's (custom attribute / event name)
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="shortcut icon" href="#" type="image/x-icon">
</head>
<body>
    <div id="app">
        <!-- Pass child to parent 3: find the method of binding parent component through its own custom event name -->
        <son @sonclick='parentFn' :parentnum='num'></son>  <!-- The attribute value (method) is the father's and the attribute is the son's (custom attribute)/Event name)-->
    </div>
    <script src="node_modules/vue/dist/vue.js"></script>
    <script>

    
    let son = {
        // Child to parent 1: click an element in the child component to trigger its own event add
        template:`<div @click = 'add'>Add after clicking{{a}}Change to:{{parentnum}}</div>`,   //Use the data in the parent component
        props:['parentnum'],   //The child component receives the data transmitted by the parent component
        data(){
            return {
                a:10,
            }
        },
        methods:{
            add(){
                // Pass child to parent 2: in the event add, trigger your own custom event name and pass the parameter
                this.$emit('sonclick',this.a);
            }
        }
    };
    let vm = new Vue({  
        el:'#app', 
        data:{
            num:9,
        }, 
        components:{
            son,   
        },
        methods:{
            // Child to parent 4: operate the data from child components in the method
            parentFn(val){
                this.num += val;
            }
        }
    })
    </script>
</body>
</html>

Steps to transfer a child to a parent:

  1. Define an event for an element in the sub component, for example: @ click = "sendMsgToParent";
  2. When the sub component responds to the above event (event in 1), use KaTeX parse error: Expected '}', got 'EOF' at end of input:... This emit(‘listenToChildEvent’, ’ this message is from child’)
    }
  3. In the child tag (referenced child tag) of the parent component, listen to the custom event and add a processing method corresponding to the event< child : listenToChildEvent=“showMsgFormChild”>
    methods: {
    showMsgFormChild: function (data) {
    console.log(data)
    }
    }
Method of parent component operating child component ($refs)

, give a ref attribute when using the component, and then in the parent component;
this. r e f s . l o a d yes c o m p group piece real example ; t h i s . refs.load is the comp component instance; this. refs.load is the comp component instance; this.refs.load.close() is to obtain and execute the method in the sub component;
this. r e f s . l o a d . refs.load. refs.load.el is the div element that gets the root tag of the sub component comp;

Tags: Javascript Vue Vue.js

Posted by kobmat on Sun, 08 May 2022 22:08:31 +0300