vue-组件

最新推荐文章于 2023-06-12 09:56:25 发布

@Tiramisu

最新推荐文章于 2023-06-12 09:56:25 发布

阅读量70

点赞数

分类专栏：笔记文章标签： vue.js

本文链接：https://blog.csdn.net/qq_46606159/article/details/105018357

版权

笔记专栏收录该内容

40 篇文章 0 订阅

订阅专栏

a.全局组件 Vue.component
b.局部组件

Vue.component("zjname", {
	template: `<div>全局定义</div>`
	//局部组件
    components: {
		navbarchild: {
			template: `<div>navbarchild-只能再父组件中使用</div>`
        }
    }
})

*自定义组件需要有一个root element
*父子组件的data是无法共享
*组件可以有data，methods,computed…,但是data 必须是一个函数

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Examples</title>
    <style>
        .navbar {
            background: red;
        }
    </style>
    <script type="text/javascript" src="lib/vue.js"></script>
</head>
<body>
    <div id="box">
        <navbar></navbar>
        <!--引用一次标签就会引用一次组件-->
        <sidebar></sidebar>
    </div>
    
    <script src="http://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script type="text/javascript">
        //1. 全局定义组件 (作用域隔离)
        Vue.component("navbar", {
            //定义组件关键字，可执行逻辑
            //`是ES6的字符串模板，没有语法检查和高亮显示
            template: `
              <div style="background:yellow">
                <button @click="handleback()">返回</button> 
                navbar--{{navbarname}}
                <button>主页</button> 
                <child></child>
                <navbarchild></navbarchild>
              </div>`,
            //组件只能访问内部方法
            methods: {
                handleback() {
                    console.log("back")
                }
            },
            //组件里的data必须是方法
            data() {
                return {
                    navbarname: "navbarname"
                }
            },
            //局部定义组件
            components: {
                navbarchild: {
                    template: `<div>navbarchild-只能再navbar组件中使用</div>`
                }
            }
        })
        
        Vue.component("child", {
            template: `<div>child组件-全局定义</div>`
        })
        
        Vue.component("sidebar", {
            //无法访问navbarchild
            //多个div需要使用一个标签包裹，否则会报错
            template: `
            <section>
                <div style="background:red">
                  sider组件
                  <child></child>  
                  <navbarchild></navbarchild>   
                </div>
                <div>213456</div>
            </section>
            `
        })
        new Vue({
            el: "#box"
        }) // root component根组件
    </script>
</body>
</html>

@Tiramisu

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue-组件

a.全局组件 Vue.componentb.局部组件Vue.component("zjname", { template: `<div>全局定义</div>` //局部组件 components: { navbarchild: { template: `<div>navbarchild-只能再父组件中使用</div>`...
复制链接

扫一扫