VUE组件

最新推荐文章于 2024-03-29 02:15:36 发布

十里顾情欢

最新推荐文章于 2024-03-29 02:15:36 发布

阅读量123

点赞数

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

本文链接：https://blog.csdn.net/qq_45368052/article/details/105989240

版权

vue 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

组件的简单实用

1.组件的定义

在 src 目录下新建文件夹 components 用来存放组件
在 components 目录下直接新建组件 *.vue

2.组件的引入

在页面中引入组件 " import 组件名 from ‘组件路径’ "

3.组件的注册

在页面中的实例中，新增属性 components
属性 components 是一个对象，把组件放进去注册

4.组件的使用

在页面标签中，直接使用引入的组件 “<组件></组件>”

<template>
  <div class="content">
    <!-- 4. 使用组件 -->
    <!-- 推荐使用 img-border 这种带下划线的 而不推荐使用 驼峰命名法 -->
    <!-- <imgBorder></imgBorder> -->
    <img-border></img-border>
  </div>
</template>

<script>
// 2. 引入自定义组件
import imgBorder from "@/components/img-border";
export default {
  // 3. 注册组件
  components: {
    // 属性名:属性值   若是一样可以写一个   imgBorder: imgBorder
    imgBorder
  }
};
</script>

<style lang="scss">
</style>

<!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>
    <div id="app">
        <h1>{{name}}</h1>
        <my-h1></my-h1>
        <my-h3></my-h3>
    </div>

</body>

</html>

<!-- 全局组件结构 -->
<template id="myh1">
    <div>
        <i>{{name + 123456}}</i>
        <h1>{{name}}</h1>
    </div>
</template>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    // 全局组件
    Vue.component("my-h1", {
        template: "#myh1",
        // template 也可以写在里面 也可以写成外面的结构

        // 在 vue 的组件中 除了 new vue 这个根组件 其他组件的 data属性 都是函数
        // 是为了保证数据的独立性
        data() {
            // 调用几次 每次执行返回一个 新对象 新地址
            return {
                name: "全局组件H1"
            }
        }
    })

    let obj = {
        template: "<h3 @click='add'>局部组件</h3>",
        methods: {
            add() {
                console.log(666);
            }
        }
        // 局部组件需要在下面注册下   new vue
        // components: {
        //     "my-h3": obj
        // }
    }

    let vm = new Vue({
        el: "#app",
        data: {
            name: "清欢"
        },
        components: {
            "my-h3": obj
        }
    })
</script>

使用 vue cli 创建的项目在main.js中创建全局组件应该是下面这种写法
jsx写法

Vue.component("my-button", {
    // template:"<button>{{text}}</button>"
    render: function (h) {
        return h("button", null, this.text)
    },
    data() {
        return {
            text: "按钮"
        }
    }
})