Vue 组件

最新推荐文章于 2024-08-12 09:24:46 发布

图灵晚辈

最新推荐文章于 2024-08-12 09:24:46 发布

阅读量465

点赞数 2

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

本文链接：https://blog.csdn.net/weixin_45991188/article/details/105460806

版权

VUE 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

文章目录

组件

组件

官网

组件是什么？

在 Vue 里，一个组件本质上是一个拥有预定义选项的一个 Vue 实例。

组件的使用

定义（注册）组件
调用（使用）组件

将组件就看成是一个函数

1. 组件的注册

全局组件注册

当前 Vue 项目中，任何组件中都可以去使用

Vue.component(Name,Options)
// Name - 组件的名字
// Options - 组件的选项配置

局部组件注册

在哪个组件中注册的，就只能使用在哪个组件中

在组件的 components 配置选项中去定义
new Vue() 生成的 Vue 实例，一般我们叫他 根组件

new Vue({
   components: {
      Name1:Options1,
    Name2: Options2
   }
})
// Name1、Name2 局部组件名字
// Options1、Options2 局部组件对应的选项

2. 组件的调用

将组件名当成自定义标签使用即可。

<!-- 这个 div 。是可以看成是 根组件的 template 的 -->
<div id="app">
    <name1></name1>
    <name2></name2>
</div>

组件的一些注意事项

组件没有 el 选项。因为后续调用组件在哪里，这个组件的挂载点就是哪里
必须有 template 或者 render 选项，用来规定组件的模板内容
data 选项必须是一个函数返回对象的形式
组件名不能是现有的html标签名，也不能是其他已经注册过的组件名
全局注册组件时，必须要放置在 new Vue 之前
组件名可以使用短横线写法与驼峰写法。但是调用组件时需要使用短横线写法。下列三种情况时可以不听这个规则

写在 template 选项中
写在里面的
.vue 后缀的单文件组件中时

组件的template模板必须只能有一个根元素。

template: `<div>
    元素....
</div>`,

prop的名字可以是用短横线与驼峰写法。但是调用组件时设置这个prop的时候，需要使用短横线写法。下列三种情况下可以不听这个规则

1 . 使用 template字符串模板
2 . 使用 <script type="text/x-template"></script>
3 . 使用 .vue 后缀的单文件组件中时

prop是不允许修改，应为要遵循单向数据流这个规定
父级模板里的所有内容都是在父级作用域中编译的；子模板里的所有内容都是在子作用域中编译的。
调用组件时，写在组件标签内的内容，默认是不会被渲染的

组件之间的通信方式

两个组件之间如何进行数据传递等一些操作

组件间的关系是如何确定的呢？

组件间的关系不是看定义组件时，而是看调用组件时

一、父组件如何通信子组件父 -> 子

<body>
        <!-- 
            一、父->子 通信

            就是使用 prop 传递数据给子组件即可
        -->
        <div id="app">
            <parent></parent>
        </div>
        <script src="https://cdn.jsdelivr.net/npm/vue@2.6.11/dist/vue.js"></script>
        <script>
            Vue.component("parent",{
                data(){
                    return {
                        son1name: "小绿",
                        son2name: "小粉",
                        son3name: "小黄",
                    };
                },
                template:`
                    <div>
                        <p>我是爹,这里有三个儿子,分别是小绿,小粉,小黄</p>
                        <button @click="son1name = '小绿绿'">修改 小绿</button>
                        <button @click="son2name = '小粉粉'">修改 小粉</button>
                        <button @click="son3name = '小黄黄'">修改 小黄</button>

                        <son :name="son1name"></son>
                        <son :name="son2name"></son>
                        <son :name="son3name"></son>
                    </div>
                `
            });
            Vue.component("son",{
                props:{
                    name:{
                        type: String,
                        required: true,
                    },
                },
                template:`
                    <div>
                        <p>我是儿子，我是{{ name }}</p>
                    </div>
                `,
            });
            var vm = new Vue({
                el: "#app",
            });
        </script>
</body>

二、子组件如何通信父组件子 -> 父
三、兄弟组件之间如何通信兄 -> 弟弟 -> 兄

组件的 data 必须写成函数形式

data:function(){
    return {'lbw':'pdd'}//template中可以使用lbw
},

原因是组件是可以进行复用的。如果 data 直接写成对象，复用的时候，会造成数据污染（复用后影响其它实例）

组件的属性props选项

Vue组件通过props属性来声明一个自己的属性，然后父组件就可以往里面传递数据。

将组件看成是一个函数，props 就是这个函数接收到的参数集合

prop 就是 props 中的具体一个参数
name - prop
hobby - prop
GSTL - prop

<body>
    <div id="app"></div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.11/dist/vue.js"></script>
    <script>
        Vue.component("pdd", {
        props: ["name", "hobby", "GSTL"],
        template: `
            <div>
                <p>大家好, 我的名字是 {{ name }} </p>
                <p>我的喜好是 {{ hobby }} </p>
                <p>我的战队是 {{ GSTL }} </p>
            </div>
        `,
        });
        var vm = new Vue({
            el: "#app",
            template: `
            <div id="app">
            <pdd name="娇妹" hobby="反向抽烟" GSTL="夕阳红战队"></pdd>
            </div>
        `,
        });
    </script>
</body>

效果图:
在这里插入图片描述

如果调用组件时，没有传递某个 porp 下来，那么组件中的这个 prop 的值是 undefined

我们也能够设置 prop 的默认值，也就是说调用时如果没有传递的化，我就使用默认值

Vue.component("pdd", {
    props: {
        name: {
        //接收到的数据类型
        type: String,
        //设置默认值
        default: "娇妹",
        },
    },
    template: `
        <div>Hello. {{ name }}</div>
    `,
});
var vm = new Vue({
    el: "#app",
    template: `
        <div>
            <pdd></pdd>
            <pdd name="骚猪"></pdd>
        </div>
    `,
});

效果图:
在这里插入图片描述

props数据校验

props: {
    // value 直接写要的类型
    key1: String
    // value 写成对象，在对象中再通过 type 属性去控制类型
    key2: {
        type: Number
    }
    //多种数据类型的参数校验
    key3: [ Number, String ]
}

传递prop的时候，默认都是字符串格式，需要转化的化，只需加上 v-bind 即可

图灵晚辈

关注

2
点赞
踩
0

收藏

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

文章目录组件组件是什么？组件的使用1. 组件的注册2. 组件的调用组件的一些注意事项组件之间的通信方式组件间的关系是如何确定的呢？组件的 data 必须写成函数形式组件的属性props选项props数据校验组件官网组件是什么？在 Vue 里，一个组件本质上是一个拥有预定义选项的一个 Vue 实例。组件的使用定义（注册）组件调用（使用）组件将组件就看成是一个函数1. 组件的...
复制链接

扫一扫

专栏目录