如何进行vue中mixin的使用

这期内容当中小编将会给大家带来有关如何进行vue中mixin的使用,文章内容丰富且以专业的角度为大家分析和叙述,阅读完这篇文章希望大家可以有所收获。

    vue之mixin的使用

    • 作用:在引入组件之后,则是将组件内部的内容如data等方法、method等属性与父组件相应内容进行合并。相当于在引入后,父组件的各种属性方法都被扩充了

    • data数据的等访问原则:若是使用mixin的当前组件有该 data数据 或者 methods方法的话 直接运用的是当前组件的数据或者方法,否则的话直接继承mixin内部的数据与方法

    • 注意点:可以定义共用的变量,在每个组件中使用,引入组件中之后,各个变量是相互独立的,值的修改在组件中不会相互影响

    • 注意点2:mixin是在引入组件之后与组件中的对象和方法进行合并,相当于扩展了父组件的data数据与方法等,可以理解为形成了一个新的组件

    mixin之中的data数据访问

    mixin / index.js
    export default {
      data () {
        return {
          msg: "我是mixin内的msg"
        }
      },
      created () {
      },
      mounted () { },
      methods: {
      }
    }
    Home.vue
    • 在Home组件中使用mixin

    <template>
      <div>
        <div>home -- {{ msg }}</div> /* home修改的msg */
      </div>
    </template>
    <script>
    import mixin from "@/mixin/index.js";
    export default {
      name: "Home",
      mixins: [mixin],
      data() {
        return {    };
      },
      created() {
        // 拿mixin的data数据
        console.log("home打印一下", this.msg); //home打印一下 我是mixin内的msg
        // 修改mixin的data数据
        this.msg = "home修改的msg";
        console.log("home打印一下", this.msg); // home打印一下 home修改的msg
      },
      methods: {
      },
    };
    </script>
    <style  lang="scss" scoped>
    </style>
    About2.vue
    <template>
      <div>
        <div>about2 -- {{ msg }}</div> /*  about2修改的msg */
      </div>
    </template>
    <script>
    import mixin from "@/mixin/index.js";
    export default {
      name: "About2",
      mixins: [mixin],
      components: {},
      data() {
        return {
          msg: "本地的msg",
        };
      },
      created() {
        console.log("about2打印一下", this.msg); // 本地的msg
        this.msg = "about2修改的msg";
        console.log("about2打印一下", this.msg); // about2修改的msg
        // 最后页面 显示的 about2修改的msg 这个数据
      },
      methods: {
      },
    };
    </script>
    <style  lang="scss" scoped>
    </style>

    mixin中的 methods方法和computed使用

    mixin / index.js
    export default {
      data () {
        return {
          msg: "我是mixin内的msg"
        }
      },
      created () { },
      mounted () { },
      computed: {
        UserName () {
          return "我是计算属性的UserName";
        },
      },
      methods: {
        tipMsg () {
          console.log("minxin内的tipMsg方法", this.msg);
        },
        tipInfo (info) {
          console.log("minxin内的tipInfo方法", info);
        }
      }
    }
    Home.vue
    <template>
      <div>
        <div>home --- msg-{{ msg }} UserName-{{ UserName }}</div>
        /* home --- msg-home修改的msg UserName-我是计算属性的UserName */
      </div>
    </template>
    <script>
    import mixin from "@/mixin/index.js";
    export default {
      name: "Home",
      mixins: [mixin],
      components: {},
      data() {
        return {};
      },
      created() {
        // 拿mixin的data数据
        console.log("home打印一下", this.msg); //home打印一下 我是mixin内的msg
        // 修改mixin的data数据
        this.msg = "home修改的msg";
        console.log("home打印一下", this.msg); // home打印一下 home修改的msg
        // 调用mixin中的 tipMsg 方法
        this.tipMsg(); // minxin内的tipMsg方法 home修改的msg
        this.tipInfo("我是home的菜鸡info"); // minxin内的tipInfo方法 我是home的菜鸡info
      },
      methods: {},
    };
    </script>
    <style  lang="scss" scoped>
    </style>
    About2.vue
    <template>
      <div>
        <div>about2 -- {{ msg }} UserName-{{ UserName }}</div>
        /* about2 -- about2修改的msg UserName-我是计算属性的UserName */
      </div>
    </template>
    <script>
    import mixin from "@/mixin/index.js";
    export default {
      name: "About2",
      mixins: [mixin],
      components: {},
      data() {
        return {
          msg: "本地的msg",
        };
      },
      created() {
        console.log("about2打印一下", this.msg); // 本地的msg
        this.msg = "about2修改的msg";
        console.log("about2打印一下", this.msg); // about2修改的msg
        // 最后页面 显示的 about2修改的msg 这个数据
        this.tipMsg(); // 最后打印 -> 我是about2本地的tipMsg方法
        this.tipInfo(); // minxin内的tipInfo方法 undefined
      },
      methods: {
        tipMsg() {
          console.log("我是about2本地的tipMsg方法");
        },
      },
    };
    </script>

    上述就是小编为大家分享的如何进行vue中mixin的使用了,如果刚好有类似的疑惑,不妨参照上述分析进行理解。如果想知道更多相关知识,欢迎关注亿速云行业资讯频道。

    原创文章,作者:Maggie-Hunter,如若转载,请注明出处:https://blog.ytso.com/204634.html

    (0)
    上一篇 2021年11月29日
    下一篇 2021年11月29日

    相关推荐

    发表回复

    登录后才能评论