vue----组件

最新推荐文章于 2024-07-18 13:56:07 发布

淘淘桃

最新推荐文章于 2024-07-18 13:56:07 发布

阅读量339

点赞数

分类专栏：前端 vue 文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/xiaolisolovely/article/details/131352303

版权

前端同时被 2 个专栏收录

16 篇文章 0 订阅

订阅专栏

vue

7 篇文章 0 订阅

订阅专栏

#组件的分类：
全局组件：可以放在根中,可以在所有组件中使用
局部组件：只能在当前组件中使用

# 1 全局组件是使用Vue.component定义的，可以在全局任意组件中使用
# 2 局部组件是定义在某个组件内的：components，只能用在当前组件中
# 3 组件可以嵌套定义和使用

1.全局组件

分析下面的代码：

1.定义全局组件，要Vue.component 开头定义

2. template ：就是你的组件内容，要用反引号引起来

3.data(){return{定义的变量}}

4.methods{定义的函数}

<script>
    //1  定义一个全局组件，vue2中，组件必须在一个标签中
    Vue.component('child', {
        template: `
          <div>
          <button @click="back">后退</button>
          {{ title }}
          <button>前进</button>
          </div>
        `,
        data() {
            return {
                title: '我是首页'
            }
        },
        methods: {
            back() {
                console.log('退了')
            }
        }
    })
    var vm = new Vue({
        el: '#app',
        data: {},
    })
</script>

2局部组件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./js/vue.js"></script>
</head>
<body>
<div id="app">
    <h1>组件的使用</h1>
    <lqz></lqz>
</div>


</body>
<script>


    //
    var lqz={
                template: `
                  <div>
                  <h1>我是局部组件</h1>
                  <img :src="url" alt="" height="400px">
                  </div>`,
                data() {
                    return {
                        url: 'http://pic.imeitou.com/uploads/allimg/230331/7-230331110I0.jpg'
                    }
                },
                methods: {}
            }

    // 根组件
    var vm = new Vue({
        el: '#app',
        data: {},
        // 局部组件是定义在某个组件内,可以定义多个,只能在它父组件中使用，不能到别的地方使用
        components: {
            lqz
        }
    })
</script>
</html>

淘淘桃

关注

0
点赞
踩
0

收藏

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

组件的分类：全局组件：可以放在根中,可以在所有组件中使用局部组件：只能在当前组件中使用# 1 全局组件是使用Vue.component定义的，可以在全局任意组件中使用# 2 局部组件是定义在某个组件内的：components，只能用在当前组件中# 3 组件可以嵌套定义和使用。
复制链接

扫一扫