Vue学习(4)局部组件

最新推荐文章于 2021-11-16 18:14:23 发布

ssqsssq

最新推荐文章于 2021-11-16 18:14:23 发布

阅读量170

点赞数

分类专栏： Vue

本文链接：https://blog.csdn.net/weixin_43778744/article/details/105210716

版权

Vue 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

<!--
 * @Author: your name
 * @Date: 2020-03-30 21:56:55
 * @LastEditTime: 2020-03-30 22:28:13
 * @LastEditors: Please set LastEditors
 * @Description: 组件
 * @FilePath: \x\04.html
-->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <!-- template 入口组件 -->
    <!-- 局部组件 全局组件 -->
    <div id="app"></div>
    <script type="text/javascript" src="./node_modules/vue/dist/vue.js"></script>
    <script type="text/javascript">
        // 声名 挂载 使用
        
        // 局部组件
        var App = {
            data() {
                return {

                }
            },
            methods: {
                clickButton(e) {
                    console.log(this)
                }
            },
            template: '<button @click="clickButton"></button>'
        };
        console.log(App)
        var vm = new Vue({
            el: "#app",
            data() {
                return {

                }
            },
            // 挂载子组件
            components: {
                App
            },
            // 父组件可以直接使用
            template: '\
                <App></App>\
            '
        });
        console.log(vm)
    </script>
</body>

</html>