【Vue】非单文件组件的全局组件和局部组件示例（图文+完整代码）

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>demo</title>
</head>
<script type="text/javascript" src="vue.js"></script>
<style>
    .group1 {
        background-color: rgb(250, 245, 217);
        border: 1px rgb(141, 141, 141) solid;
        margin-bottom: 20px;
        padding-left: 20px;
    }

    .group2 {
        background-color: rgb(216, 216, 216);
        border: 1px rgb(149, 149, 149) solid;
        margin-bottom: 20px;
        padding-left: 20px;
    }

    button {
        width: 200px;
        height: 40px;
        margin-bottom: 20px;
        margin-top: 10px;
        font-size: 18px;

    }
    #box_2 div{
        background-color: rgb(206, 231, 231);
        height: 70px;
        width: 300px;
        line-height: 70px;
        padding-left: 10px;
    }

    /* .box1{background-color: rgb(241, 150, 150);} */
</style>


<body>
    <div id="box">

        <div class="group1">

            <!-- 第三步：使用组件,编写组件标签 -->
            <group1></group1>


        </div>
        <hello></hello>

        <div class="group2">
            <!-- 第三步：使用组件,编写组件标签 -->
            <group2></group2>
        </div>
    </div>


    <div id="box_2">
        <hello></hello>
    </div>


</body>
<script type="text/javascript">

    Vue.config.productionTip = false;

    // 第一步：创建group1组件
    const group1 = Vue.extend({

        // el:"#box"   // 组件定义时，不要写el

        // 组件中写入html,注意，一定要用<DIV>等元素包起来
        template: `
            <div class='box1'>
                <h2>我是组件1 - 商家</h2>
                <hr>
                <h3>商家名称：{
   
   {bName}}</h3>
                <h3>商家地址：{
   
   {bCity}}</h3>
                <hr>
                <button @click='show1'>点击我显示商家名称</button>
            </div>
            `,
        data() {
            return {
                bName: "美食林",
                bCity: "邯郸"
            }
        },
        methods: {
            show1() {
                alert(this.bName)
            }
        },

    });

    // 第一步：创建group2组件
    const group2 = Vue.extend({

        // 组件中写入html,注意，一定要用<DIV>等元素包起来
        template: `
            <div class='box1'>
                <h2>我是组件2 - 会员</h2>
                <hr>
                <h3>会员名称：{
   
   {cName}}</h3>
                <h3>会员地址：{
   
   {cCity}}</h3>
                <hr>
                <button @click='show2'>点击我显示会员姓名</button>
            </div>
            `,
        data() {
            return {
                cName: "张飞",
                cCity: "北京"
            }
        },
        methods: {
            show2() {
                alert(this.cName)
            }
        },

    });


    // 第一步：创建hello组件
    const hello = Vue.extend({

        // 组件中写入html,注意，一定要用<DIV>等元素包起来
        template: `
        <div>
            <h2>您好!我是{
   
   {cName}}!</h2>
        </div>
        `,
        data() {
            return {
                cName: "hello全局组件",
            }
        },
        methods: {
            show2() {
                alert(this.cName)
            }
        },

    });

    // 第二步:全局注册组件
    Vue.component('hello', hello)


    var box = new Vue({
        el: "#box",
        data: {
            names: "孔明"
        },
        // 第二步：注册组件
        components: {
            group1: group1,
            group2: group2,
        }
    })

    var box_1 = new Vue({
        el: "#box_2"
    })
</script>

</html>
【Vue】非单文件组件的全局组件和局部组件示例（图文+完整代码）

猜你喜欢
