440 vue混入mixins

时间：2020-04-13 14:53:03 收藏：0 阅读：63

01-混入mixin.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <title>Document</title>
</head>

<body>
    <!-- 
        混入 mixin  => js混入式继承
        作用 : 共享功能
        混入对象： data、methods......
    -->
    <div id="app">
        <one></one>
        <two></two>
    </div>

    <script src="./vue.js"></script>
    <script>
        // 准备一个混入对象
        const hello = {
            methods: {
                sayHello() {
                    console.log(‘大家好, 我系‘ + this.name)
                }
            }
        }

        Vue.component(‘one‘, {
            mixins: [hello],
            data() {
                return {
                    name: ‘春‘
                }
            },
            template: `<div @click=‘sayHello‘> 子组件 one  :  </div>`
        })

        Vue.component(‘two‘, {
            mixins: [hello],
            data() {
                return {
                    name: ‘马‘
                }
            },
            template: `<div @click=‘sayHello‘> 子组件  two:  </div>`
        })

        const vm = new Vue({
            el: ‘#app‘,
            data: {}
        })
    </script>
</body>

</html>

02-混入-重名.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <title>Document</title>
</head>

<body>
    <!-- 
        混入 mixin   => js => 混入式继承
        作用 : 共享功能
        混入对象 ( data methods ,,,,)
      -->
    <div id="app">
        <one></one>
        <two></two>
    </div>
    <script src="./vue.js"></script>
    <script>
        // 准备一个混入对象
        const hi = {
            methods: {
                sayHello() {
                    console.log(‘大家好,我系‘ + this.name)
                }
            }
        }

        Vue.component(‘one‘, {
            mixins: [hi],
            data() {
                return {
                    name: ‘春‘
                }
            },
            template: `<div @click=‘sayHello‘> 子组件 one  :  </div>`,
            methods: {
                // （1）自己组件内部有同名的方法时，就执行自己的方法；（2）需要mixins的的方法，就继承，不需要就重写
                sayHello() {
                    console.log(‘测试‘)
                }
            }
        })

        Vue.component(‘two‘, {
            mixins: [hi],
            data() {
                return {
                    name: ‘马‘
                }
            },
            template: `<div @click=‘sayHello‘> 子组件  two:  </div>`
        })

        const vm = new Vue({
            el: ‘#app‘,
            data: {}
        })
    </script>
</body>

</html>

原文：https://www.cnblogs.com/jianjie/p/12691024.html