Vue operation method, there are a lot of relevant data in data transmission, such as father and son component subcomponents modify the parent component data, props, computed, watch, sync, and so on, do it today to summarize the use of these methods

Computed is a calculation of attributes

Computed is computing attributes: Reduce the complexity of template {{}}. Putting too much logic into a template can make it too heavy and difficult to maintain. For any complex logic, you should use computed attributes to write complex arithmetic to a computed function and reference it in a template to make the logic straightforward: Computed is parallel to data. A series of operations are encapsulated as a method in computed, and the method name is written directly when invoked without adding ()

new Vue({
  el:"#app".data: {user: {email:"[email protected]".nickname:"oldUath".phone:"12812345678"}},// Calculate attributes
  computed: {displayName(){
        // Return a result
      const user=this.user
      return user.nickname ||user.phone||user.email
    }
  },
  template:` 
      

        {{displayName}} 
      
 `
})
Copy the code

Watch the listener

Watch: listener: Watches data changes on the Vue instance and executes predetermined functions whenever specified data changes. When asynchronous or expensive operations need to be performed when data changes;

Watch Usage method 1:

<div id="app"> {{MSG}} <br> changed? {{isChange}} <button @click="change"</button> </div>new Vue({
      el: "#app".data: {
      		// This is the first layer of data
            msg:'To see a thousand miles'.isChange:'No'.user: {// This is the second layer of data
                name:"oldUath".phone:'18312345678'}},watch: {// If MSG changes, this method is executed, and the first layer of data only needs to write the data name (){}
        msg(val,oldVal){
            this.isChange = 'Yes'
        },
        ','user.name'(){}
        'user.name'() {console.log('the user. The name changed')}},methods: {change(){
            this.msg = 'Take it to the next level'}}})Copy the code

Note: in vUE, if an object is assigned to the same object, its address is changed

//obj:{a:'a'}
obj.a+='hi'// The obj address has not changed, so the obj event will not be executed
Copy the code

You can use deep: true to tell watch to listen in depth. If the value changes, it changes

watch:{
	obj(){
    		handle(){console.log('the obj has changed')},deep:true
}
Copy the code

$watch(‘ listener ‘, function called,{immediate:true})

The effect is the same as method 1

const vm = new Vue({
      el: "#app".data: {
            msg:'To see a thousand miles'.isChange:'No'.user: {name:"oldUath".phone:'18312345678'}},methods: {change(){
            this.msg = 'Take it to the next level'
        }
      }
    })
   vm.$watch('msg'.function(){
   		console.log('n changed')
   },{immediate:true})
Copy the code

Parent component passes data to child component: Props

To pass data to a child component, the parent component needs to introduce variables in the child component using Props

Parent component gives child component money="100"Copy the code

It is passed in the parent component first

// Call the child from the parent component
<Child :money="100"><Child>
Copy the code

Add data to the subcomponent and add the money variable

<template>
<div class="red">RMB + {{money}}<button>To spend money</button>
</div>
</template>
<script>
export default {
+  props:['money']}</script>
Copy the code

The child component can only use the parent component’s data, not modify it

Child component modifies parent component data (.sync principle)

Components cannot directly modify data outside the props

Use $emit to make the changes

Use $emit on child components (‘ parameter 1 ‘, parameter 2)

The current instance inherits eventBus and can fire an event

To write $emit to the child component, the first argument is the event name and the second argument is the modified value

<! -- $emit() emits an event, update:money is the event name --><button @click="$emit('update:money',money-10)">To spend money</button>
Copy the code

Use $event on the parent component to accept argument 2;

$event receives the result of the child component argument 2

<! Update :money; $event: update:money; $event :money;<Child :money="total" v-on:update:money="total = $event" />
Copy the code

Simplified result: sync

The parent component is so cumbersome that Vue encapsulates it as a modifier

    <Child :money.sync="total"  />
Copy the code

The child component is written the same way

This only addresses communication between parent and child components. What about communication between sibling components?

Sibling communication:$emit 和 $on

This approach uses an empty Vue instance as the central event bus (event hub) to trigger and listen for events, subtly and lightly enabling communication between any component, including parent, sibling, and cross-level. When our project was larger, we could have chosen a better state management solution, VUEX. Concrete implementation mode

    var Event=newVue(); $emit(Event name, data);// Pass event data$on(Event name,data= > {});// Accept data
Copy the code

For example, component A passes information to component C, where ABC is the adjacent component

Use $emit to provide the event data from the A component. The first argument is the data name, which is the same as the first argument to the on component. The second parameter is data

<template id="a">
  <div>
    <h3>A component: {{name}}</h3>
    <button @click="send">Send the data to the C component</button>
  </div>
</template>

<script>
var Event = new Vue();// Define an empty Vue instance
var A = {
    template: '#a'.data() {
      return {
        name: 'tom'}},methods: {
      send() {
        Event.$emit('data-a'.this.name); }}}</script>
Copy the code

The C component accepts data $on. The first parameter is the data name and the second parameter is used to receive the data

<template id="c">
  <div>
    <h3>{{name}}, {{age}}</h3>
  </div>
</template>
<script>

var Event = new Vue();// Define an empty Vue instance
var C = {
    template: '#c'.data() {
      return {
        name: ' '.age: ""}},mounted() {// Execute after template compilation is complete
     Event.$on('data-a'.name= > {
         this.name = name;// The arrow function does not generate a new this}}})</script>
Copy the code

conclusion

  • To pass data between father and sonpropsand$emit
  • Brothers pass data between brothers$emitand$on
  • The parent component passes data to the grandchild componentprovideandinject

Think no article summarizes component communication