Examples Vue project traditional values siblings

Hello everyone, today to give us an example of traditional values Vue project between siblings, parent-child communication between the components is relatively simple, not discussed here.

Assuming that the project requirements are as follows:

Figure in the upper left corner there is a button, our needs are when clicked, navigation sidebar shrink and enlarge the main interface, as shown below

Since vue project is component-based, so there is demand for value-passing between the components, the following is a specific operation code:

1. First create the src js a project file path, here named byval.js, the following code is written in the file:

/ * JSLint esversion: 6 * / 
import View from 'view' ; 
export default  new View ();

2. In the head assembly (including the navigation button click shrinking) shrink currently need to pass information to the navigation sidebar side navigation interface and two main components, the following code is written in a header file:

import New from "./new.js";

export default {
  data: function() {
    return {
      isToggle: false，      
      // isToggle 是判断是否收缩导航栏的变量，默认为true表示收缩
    };
  },
  methods: {
    // onToggle是处理按钮点击事件的函数
    onToggle: function() {
      // 当点击时，切换当前状态
      this.isToggle = !this.isToggle;
      // 触发 on-toggle-nav 事件并返回当前导航栏的收缩状态变量
      New.$emit("on-toggle-nav", this.isToggle);
    }
  }
};

3. 在侧边导航栏组件中，需要接受头部导航栏传递过来的变量，判断当前是否收缩导航栏，所以在侧边导航栏组件中写入如下代码

export default {
    data:{
        toggle:false,
    }
    ,created(){
         // 绑定on-toggle-nav事件，并在事件触发时，接受头部组件中传来的值
         New.$on("on-toggle-nav", data => {
          // 根据头部中传来的值更新当前组件中对应的变量
          if (data === false) {
            this.toggle = true;
          } else {
            this.toggle = false;
          }
        });
    }
};

4. 在主界面中组件中，需要接受头部导航栏中传递过来的变量，判断当前是否最大化主界面，代码逻辑和侧边导航栏组件中的是一致的所以不在此赘述。

Well, the process vue project siblings each pass value is so, thank you for reading

Examples Vue project traditional values siblings

Guess you like