vue组件的使用

注意点：

　　声子-->挂子-->用子

    • 声子：使用组件需先声明(创建)子组件，子组件中不能存在el属性
    • 挂子：在使用的组件(谁使用谁就是当前子组件的父组件)中，进行conpontents中挂载
    • 用子：这里使用需要包含在一个闭合标签中(例如：<div>组件名</div>)，用子可以是vue实例的tamplate属性或者el属性

一、局部组件

方式一：

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style type="text/css">
    </style>
</head>
<body>
    
<div id='app'>
    <Vheader></Vheader>
</div>

</body>

<script type="text/javascript" src="../vue02/js/vue.js"></script>

<script type="text/javascript">

    // 组件的创建
    let Vheader =  {
            // data必须是一个函数
        data:function() {
            //必须有个return返回，可以为空对象
                return {
                    text1: "快乐style"
                };
        },

        template: `
            <div>
                <h2>{{ text1 }}</h2>
            </div>
            `
    };
    
    // 创建vue对象
    var app = new Vue({
        el: "#app",
        data: {},
        components: {
            Vheader
        }
        
    })

</script>

</html>

方式二：

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style type="text/css">
    </style>
</head>
<body>
    
<div id='app'>
    <!-- 用子 -->
    <Vheader></Vheader>
</div>

</body>

<script type="text/javascript" src="../vue02/js/vue.js"></script>

<script type="text/javascript">

    // 组件的创建(声子))
    // 子组件2，被子组件使用
    let Vheader2 = {
        // data必须是一个函数
        data:function() {
            //必须有个return返回，可以为空对象
                return {
                    text2: "我是Vheader的子组件"
                };
        },

        template: `
            <div>
                <h3>{{ text2 }}</h3>
            </div>
            `
    };

    // 组件的创建(声子))
    // 子组件，被vue实例使用
    let Vheader = {
        // data必须是一个函数
        data:function() {
            //必须有个return返回，可以为空对象
                return {
                    text1: "快乐style"
                };
        },

        template: `
            <div>
                <h2>{{ text1 }}</h2>
                <Vheader2></Vheader2>
            </div>
            `,
        
        // 挂子
        components: {
            Vheader2
        }
    };
    
    // 创建vue对象
    var app = new Vue({
        el: "#app",
        data: {},
        // 挂子
        components: {
            Vheader
        }
    })

</script>

</html>

 二、全局组件

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style type="text/css">
    </style>
</head>
<body>
    
<div id='app'>
    <Vheader></Vheader>
</div>

</body>

<script type="text/javascript" src="../vue02/js/vue.js"></script>

<script type="text/javascript">

    // 组件的创建
    Vue.component('Vheader', {
        // data必须是一个函数
        data:function() {
            //必须有个return返回，可以为空对象
                return {
                    text1: "快乐style"
                };
        },

        template: `
            <div>
                <h2>{{ text1 }}</h2>
            </div>
            `
    });
    
    // 创建vue对象
    var app = new Vue({
        el: "#app",
        data: {},
        
    })

</script>

</html>

 

posted @ 2019-10-08 22:36  WiseAdministrator  阅读(242)  评论(0)  编辑  收藏  举报