vue CDN 模板挂载操作

最新推荐文章于 2023-12-17 22:54:13 发布

Yweir

最新推荐文章于 2023-12-17 22:54:13 发布

阅读量773

点赞数

分类专栏： javascript 文章标签： vue js javascript html

本文链接：https://blog.csdn.net/laow1314/article/details/109323527

版权

javascript 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

vue CDN（ template 操作）

创建模板

在html 页面 body标签内添加一下模板
注意：模板ID要唯一

 	<template id='tableDataTemplate'>
        <el-table :data="tableData" style="width: 100%">
            <el-table-column prop="date" label="日期" width="180">
            </el-table-column>
            <el-table-column prop="name" label="姓名" width="180">
            </el-table-column>
            <el-table-column prop="address" label="地址">
            </el-table-column>
        </el-table>
    </template>

全局引用

全局注册组件

<script>
    Vue.component('todo-item', {
        // todo-item 组件现在接受一个
        // "prop"，类似于一个自定义 attribute。
        // 这个 prop 名为 todo。
        props: ['todo'],
        template: '#tableDataTemplate',
        data() {
            return {
                tableData: [{
                    date: '2016-05-02',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1518 弄'
                }, {
                    date: '2016-05-04',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1517 弄'
                }, {
                    date: '2016-05-01',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1519 弄'
                }, {
                    date: '2016-05-03',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1516 弄'
                }]
            }
        },
        methods: {
            demo: function (val) {
                console.log('调用的子模块的方法',val);
            }
        },
        mounted(){
            console.log('组件被挂载了');
        }
    })
 </script>

vue 模板引用

 <script>
    new Vue({
        el: '#app',
        data: function () {
            return { visible: false }
        },
        components: {
           // tableDataTemplate
        },
        mounted() {
            window.vue = this;
        },
        // template: '#tableDataTemplate',
    })
 </script>

完整代码

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <!-- import CSS -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>

<body>
    <div id="app">
        <el-button @click="visible = true">Button</el-button>
        <el-dialog :visible.sync="visible" title="Hello world">
            <p>Try Element</p>
        </el-dialog>
        <todo-item ref="reference"></todo-item>
    </div>

    <template id='tableDataTemplate'>
        <el-table :data="tableData" style="width: 100%">
            <el-table-column prop="date" label="日期" width="180">
            </el-table-column>
            <el-table-column prop="name" label="姓名" width="180">
            </el-table-column>
            <el-table-column prop="address" label="地址">
            </el-table-column>
        </el-table>
    </template>
</body>
<!-- import Vue before Element -->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<!-- import JavaScript -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>
    Vue.component('todo-item', {
        // todo-item 组件现在接受一个
        // "prop"，类似于一个自定义 attribute。
        // 这个 prop 名为 todo。
        props: ['todo'],
        template: '#tableDataTemplate',
        data() {
            return {
                tableData: [{
                    date: '2016-05-02',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1518 弄'
                }, {
                    date: '2016-05-04',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1517 弄'
                }, {
                    date: '2016-05-01',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1519 弄'
                }, {
                    date: '2016-05-03',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1516 弄'
                }]
            }
        },
        methods: {
            demo: function (val) {
                console.log('调用的子模块的方法',val);
            }
        },
        mounted(){
            console.log('组件被挂载了');
        }
    })
    new Vue({
        el: '#app',
        data: function () {
            return { visible: false }
        },
        components: {
           // tableDataTemplate
        },
        mounted() {
            window.vue = this;
        },
        // template: '#tableDataTemplate',
    })
</script>

</html>

运行结果

在这里插入图片描述

局部引用

局部注册组件

<script>
    var ComponentA = {
        // todo-item 组件现在接受一个
        // "prop"，类似于一个自定义 attribute。
        // 这个 prop 名为 todo。
        props: ['todo'],
        template: '#tableDataTemplate',
        data() {
            return {
                tableData: [{
                    date: '2016-05-02',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1518 弄'
                }, {
                    date: '2016-05-04',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1517 弄'
                }, {
                    date: '2016-05-01',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1519 弄'
                }, {
                    date: '2016-05-03',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1516 弄'
                }]
            }
        },
        methods: {
            demo: function (val) {
                console.log('调用的子模块的方法', val);
            },
            sendMessage: function () {
                console.log(this.$emit);
                this.$emit('sendaa', '组件ComponentA发送消息了');//发送消息给父组件
            }
        },
        mounted() {
            console.log('组件被挂载了');
        }
    };
</script>

vue 模板引用

<script>
    new Vue({
        el: '#app',
        data: function () {
            return { visible: false, msg: '' }
        },
        components: {
            'component-a': ComponentA
        },
        mounted() {
            window.vue = this;
        },
        methods: {
            sendaa: function (val) {
               this.msg = val;//监听子组件发送的消息
            }
        }
    })
</script>

完整代码

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <!-- import CSS -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>

<body>
    <div id="app">
        <el-button @click="visible = true">Button</el-button>
        <el-dialog :visible.sync="visible" title="Hello world">
            <p>Try Element</p>
        </el-dialog>
        接收到子组件的信息：{{msg}}
        <component-a ref="reference" @sendaa="sendaa"></component-a>
    </div>

    <template id='tableDataTemplate'>
        <div>
            <el-table :data="tableData" style="width: 100%">
                <el-table-column prop="date" label="日期" width="180">
                </el-table-column>
                <el-table-column prop="name" label="姓名" width="180">
                </el-table-column>
                <el-table-column prop="address" label="地址">
                </el-table-column>
            </el-table>
            <el-button type="primary" @click='sendMessage'>发送消息给父组件</el-button>
        </div>
    </template>
</body>
<!-- import Vue before Element -->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<!-- import JavaScript -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>
    var ComponentA = {
        // todo-item 组件现在接受一个
        // "prop"，类似于一个自定义 attribute。
        // 这个 prop 名为 todo。
        props: ['todo'],
        template: '#tableDataTemplate',
        data() {
            return {
                tableData: [{
                    date: '2016-05-02',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1518 弄'
                }, {
                    date: '2016-05-04',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1517 弄'
                }, {
                    date: '2016-05-01',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1519 弄'
                }, {
                    date: '2016-05-03',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1516 弄'
                }]
            }
        },
        methods: {
            demo: function (val) {
                console.log('调用的子模块的方法', val);
            },
            sendMessage: function () {
                console.log(this.$emit);
                this.$emit('sendaa', '组件ComponentA发送消息了');
            }
        },
        mounted() {
            console.log('组件被挂载了');
        }
    };
    new Vue({
        el: '#app',
        data: function () {
            return { visible: false, msg: '' }
        },
        components: {
            'component-a': ComponentA
        },
        mounted() {
            window.vue = this;
        },
        methods: {
            sendaa: function (val) {
               this.msg = val;
            }
        }
    })
</script>

</html>

运行结果

在这里插入图片描述

Yweir

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
vue CDN 模板挂载操作

vue CDN（ template 操作）创建模板全局引用声明，注册模板（全局引用）vue 模板引用完整代码运行结果局部引用vue 模板引用完整代码运行结果创建模板在html 页面 body标签内添加一下模板注意：模板ID要唯一 <template id='tableDataTemplate'> <el-table :data="tableData" style="width: 100%"> <el-table-column p
复制链接

扫一扫