18-组件的属性 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="app">
        <login></login>
    </div>
</body>
</html>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>

    //全局组件
    Vue.component('register',{
       template:`<h2>注册</h2>`,
       data() {
           return {};
       },
        methods:{},//用来定义自己的一些相关方法
        computed: {},//用来定义自己的计算属性
        components:{},//用来定义自己的组件
    });
    
    
    //登录组件配置对象
    const login = {
        template:`<div>
                    <h2>用户登录</h2>
                    <h2>{{counter}}----{{counterSqrt}}-----{{counterSqrt}}</h2>
                    <h3>{{msg}}</h3>
                    <button v-on:click="test">点我</button>
                    <aa></aa>
                  </div>`,  //用来书写组件html代码

        data(){ //用来给当前组件定义属于组件自己的数据  组件中定义数据  data必须是一个函数
            return {
                counter:2,
                msg:"我是组件msg",
            }
        },
        methods:{
            test(){
                this.counter++;
            }
        },
        computed:{//用来给组件自己定义一些计算方法
            counterSqrt(){
                return this.counter*this.counter;
            }
        },
        //初始化阶段
        beforeCreate(){

        },
        created(){

        },
        beforeMount(){},
        mounted(){},
        //运行阶段
        beforeUpdate(){},
        updated(){},
        //销毁阶段
        beforeDestroy(){},
        destroyed(){},
        components: {//只能在这个组件中使用这个子组件
            aa:{
                template: `<div><span>我是aa子组件</span></div>`
            }
        }
    };

    const app = new Vue({
        el: "#app",
        data:{

        },
        methods: {

        },
        components:{//用来定义局部组件
            login,
        }
    });
</script>
posted @ 2021-09-26 16:00  不是孩子了  阅读(36)  评论(0)    收藏  举报