vue组件递归

vue组件递归

组件递归的话可以用来做一些后台管理系统的导航列表页面 可以用于多级导航的布局，十分简单

首先是一个Tree组件的话

tree.vue

<template>
  <div>
      <div :style="indent">
        {{title}}
      </div>
    </div>
</template>

<script>
export default {
  name: "Tree",
  props: {
    title: String,
    children: Array,
  },
</script>

<style>

</style><template>
  <div>
        <span v-show="!ishow">
          <icon name="xia"></icon>
        </span>
    </div>
</template>

<script>
export default {
  name: "Tree",
  props: {
    title: String,
    children: Array,
    sj: Number,
    ishow: true,
  },
</script>

<style>

</style>

在页面中引入这个组件 并且在页面中定义还导航的数据列表 项目中的话一般是接口来获取的，这里我手动模拟一个

home.vue

<template>
  <div>
  //这里的title就是页面中标题，children就是定义的children
    <Tree :title="list.title" :children="list.children"/>
  </div>
</template>

<script>
import Tree from "../components/tree";
export default {
  components: {
    Tree,
  },
  data() {
    return {
      list: {
        title: "后台管理系统",
        children: [
          {
            title: "一级导航（1）",
            children: [
              {
                title: "二级导航（1——1）",
                children: [
                  {
                    title: "三级导航（1——1——1）",
                  },
                  {
                    title: "三级导航（1——1——2）",
                  },
                  {
                    title: "三级导航（1——1——3）",
                  },
                ],
              },
              {
                title: "二级导航（1——2）",
              },
            ],
          },
          {
            title: "一级导航（2）",
            children: [
              {
                title: "二级导航（2——1）",
              },
              {
                title: "二级导航（2——2）",
              },
            ],
          },
          {
            title: "一级导航（3）",
            children: [
              {
                title: "二级导航（3——1）",
                children: [
                  {
                    title: "三级导航（3——1——1）",
                  },
                  {
                    title: "三级导航（3——1——2）",
                  },
                  {
                    title: "三级导航（3——1——3）",
                  },
                ],
              },
              {
                title: "二级导航（3——2）",
              },
            ],
          },
        ],
      },
    };
  },
};
</script>

<style>
</style>

重点来了，其实组件的递归呢就是利用组件调用组件来实现的

这时候让我们来看tree.vue页面

<template>
  <div>
      <div :style="indent">
        {{title}}
      </div>
       <Tree
        v-for="(item,index) in children"
        :key="index"
        :title="item.title"
        :children="item.children"
      ></Tree>
      //这里的Tree就是下面定义的name
    </div>
</template>

<script>
export default {
  name: "Tree",//组件调用组件还是与name有关写的
  props: {
    title: String,
    children: Array,
  },
</script>

<style>

</style><template>
  <div>
        <span v-show="!ishow">
          <icon name="xia"></icon>
        </span>
    </div>
</template>

<script>
export default {
  name: "Tree",
  props: {
    title: String,
    children: Array,
  },
</script>

<style>

</style>

就这样 就实现了组件之间的递归，十分简单 再美化页面以下就可以了

vue mixins的用法

混入 (mixin) 提供了一种非常灵活的方式，来分发 Vue 组件中的可复用功能。一个混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被“混合”进入该组件本身的选项

不仅仅局限于方法 还可以是data的参数，这个包含性很大

首先新建一个mixins的js文件

var GetUserDataMixIn = {
  data() {
    return { msg: 'mixins' }
  },
  created: function () {
    this.getData();
  },
  methods: {
    getData: function () {
      console.log("调用后台用户数据的方法");
    }
  }
};

export default GetUserDataMixIn;

页面中引入这个js并且注册下

<template>
  <div>
    <button @click="getData">{{msg}}</button>
  </div>
</template>
<script>
import GetUserDataMixIn from '../mixins/mixin'
  mixins:[GetUserDataMixIn],
</script>

点击按钮输出结果“调用后台用户数据的方法“按钮文字为”mixins“