vue学习笔记day14 vue全局组件

最新推荐文章于 2024-06-06 16:53:37 发布

桑丘紫言

最新推荐文章于 2024-06-06 16:53:37 发布

阅读量141

点赞数

分类专栏： vue

本文链接：https://blog.csdn.net/weixin_39209728/article/details/104577230

版权

vue 专栏收录该内容

27 篇文章 0 订阅

订阅专栏

一 vue的组件
    什么是组件
        1》 扩展html元素
        2》重用性
        3》可以实现特殊功能

    全局组件（父组件）
        Vue.Component(组件名称，{})
        组件中的data是一个函数 不是对象
        data必须返回对象 return { 对象名称:值 ,}
    局部组件（子组件）

例子1：

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <zhangsan></zhangsan>

    </div>

    <script src="../vue.js"></script>
    <script>
        Vue.Component("zhangsan", {
            template: "<h1>这是一个全局组件</h1>"
        })
        new Vue({
            el: "#app",
            data: {

            },
            methods: {

            }

        })
    </script>
</body>

</html>

例子2

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <zhangsan></zhangsan>
        <button @click="run">点击</button>
    </div>

    <script src="../vue.js"></script>
    <script>
        var tpl = {
            data: function() {
                return {
                    str: "组件str",
                }
            },
            template: "<div @click='run'>这是一个组件---{{str}}</div>",
            methods: {
                run: function() {
                    alert(999);
                }
            }
        };
        Vue.component("zhangsan", tpl);
        new Vue({
            el: "#app",
            data: {
                str: "这是数据"
            },
            methods: {
                run: function() {
                    alert(1);
                }
            }

        })
    </script>
</body>

</html>

桑丘紫言

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue学习笔记day14 vue全局组件

一 vue的组件什么是组件 1》扩展html元素 2》重用性 3》可以实现特殊功能全局组件（父组件） Vue.Component(组件名称，{}) 组件中的data是一个函数不是对象 data必须返回对象 return { 对象名称:值 ,} 局部组件（子组件）例...
复制链接

扫一扫

专栏目录