vue extends和mixins

这两家伙就是一套可复用的vue配置模板  保证多用 修改的时候只需要修改一个地方就好了 挺方便的 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Vue 测试实例</title>
        <script src="./js/vue.js"></script>
    </head>
    <body>
        <div id="app" :tsprops='123'>
            <p>{{ tsprops }}</p>
            <keep-alive>
                <test></test>
            </keep-alive>
        </div>

        <script>
            
            const extend = {
             data () {
              return {
               name: 'extend name'
              }
             }
            }
            const mixin1 = {
             data () {
              return {
               name: 'mixin1 name'
              }
             }
            }
            
            // 注册
            Vue.component('test', {
              template: '<h1>{{txt}}</h1>',
              mounted (){
                  this.txt = "被改变变化";
              },
              mixins: ["mixins"],
              extends: extend,
              data(){
                return {
                    txt: "测试文字",
                    name: "asdasd"
                }
              },
            })
            
            new Vue({
                el: '#app',
                props: {
                    tsprops: ""
                },
                data: {
                    message: 'Hello Vue.js!'
                },
                methods: {
                    appFn (){
                        debugger;
                    }
                }
            })
        </script>
    </body>
</html>

说实话 还是没什么可说的  基础常识

posted @ 2021-10-09 16:04  blurs  阅读(104)  评论(0)  编辑  收藏  举报