Vue组件，父子组件间的传值、插槽向组件传递内容

最新推荐文章于 2023-08-14 17:29:08 发布

昵称太难想

最新推荐文章于 2023-08-14 17:29:08 发布

阅读量1k

点赞数 1

分类专栏： javascript vue 文章标签： vue javascript js html

本文链接：https://blog.csdn.net/qq_43739752/article/details/119463821

版权

javascript 同时被 2 个专栏收录

8 篇文章 0 订阅

订阅专栏

vue

4 篇文章 0 订阅

订阅专栏

Vue组件基础

Vue组件

概述

组件是可复用的vue实例，在开发中我么可以将经常重复使用的功能封装为组件，达到快捷便捷开发的目的。vue中的组件个人理解就是创建一个标签，名字自己决定。

组件使用

通常应用会以一颗组件树的形式来组织：
在这里插入图片描述
图例中有页头、侧边栏、内容区等组件，每个组件又包含了其它的像导航链接、博文之类的组件。
为了能够使用组件，我们需要注册组件

//全局注册
Vue component=('componentName',{
// ...option...
})

组件注册时的名可以使用驼峰命名，也可以使用短横线‘-’链接，但是在使用时只能使用短横线

//使用组件
<div>
	<component-name></component-name>
</div>
//注册组件
Vue component=('componentName',{
// ...option...
})

组件中的数据data只能使用函数式data(){ return{ } }。vue实例中使用的是data:{ }的形式，但是在vue组件化时使用的是data () { return{} }的形式，因为前者中的数据是全局的会造成数据污染，组件化时使用函数的形式通过return返回数据data(){ return{ } }，数据只能在组件中被访问.不会造成数据污染。

组件间通信

父组件向子组件传值

父子组件通过prop通信，prop允许在组件注册上自定义一些属性，父组件通过绑定这些属性给子组件传值。

组件内部通过props接收传递的值：

Vue component=('componentName',{
props：[title],
template:`<div>{{title}}</div>`
})

父组件通过属性将值传给子组件

<component-name :title="来自父组件的数据"></component-name>

下面是一个完整的例子：

<!-- 绑定样式，设置字体初始大小-->
    <div id="app" :style="{'font-size':FontSize+'em'}">
        <!-- meg是父组件向子组件传递的值 当前的字号-->
        <font-test :meg=FontSize></font-test>
    </div>

    <script type="text/javascript">
        //定义名为子组件
        Vue.component('fontTest',{
            props: {
            //子组件上自定义属性
                meg:Number
            },
            template:`<div>
            <span><h5>{{title + meg}}</h5></span>
            <br/>
            <button @click="$emit('change1')">change font size big</button>
            <button @click="$emit('change2')">change font size little</button>
        </div>`
        })

        let vm =new Vue({
            el: '#app',
            data:{
                FontSize: 2
            },
        })

    </script>

子组件向父组件传值

前面讲了父组件可以通过prop自定义的属性给子组件传值，那么子组件如何想父组件传值呢？试想一下下列场景：在父组件中设置一个< div >标签的字体大小为2em，在标签中添加两个按钮(有子组件提供)点击按钮可以改变字体的大小。因为父子组件是两个独立vue实例，即使在子组件中添加cilck方法也不能影响到父组件中的样式。这个时候就需要父子组件之间进行通信，传值。

子组件通过自定义事件向父组件传递信息

<button @click="$emit('change1')">change font size big</button>

父组件监听子组件的事件

 <font-test :meg=FontSize @change1=handelChangeBig ></font-test>

下面是一个完整的例子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="vue.js"></script>
    <title>组件基础</title>
</head>
<body>


    <!-- 绑定样式，设置字体初始大小-->
    <div id="app" :style="{'font-size':FontSize+'em'}">
        <!-- meg是父组件向子组件传递的值 当前的字号-->
        <!-- @change值子组件向父组件传值-->
        <font-test :meg=FontSize @change1=handelChangeBig @change2=handelChangeLittle></font-test>
    </div>

    <script type="text/javascript">
        //定义名为fontTest子组件
        Vue.component('fontTest',{
            props: {
                meg:Number
            },
            // 组件内的data必须是一个函数，而不是对象
            data(){
                
                return {
                    title:"当前字号是："
                }
            },
            template:`<div>
            <span><h5>{{title + meg}}</h5></span>
            <br/>
            <button @click="$emit('change1')">change font size big</button>
            <button @click="$emit('change2')">change font size little</button>
        </div>`
        })


        let vm =new Vue({
            el: '#app',
            data(){
                return {
                    FontSize: 2
                }
            },
            methods:{
                handelChangeBig () {
                    this.FontSize+=2;
                },
                handelChangeLittle(){
                    if(this.FontSize>2){
                        this.FontSize-=2;
                    }else{
                        alert("已是最小字号")
                    }

                }
            }
        })

    </script>
</body>
</html>

其实这一部分害不能够称为子组件向父组件传值，只能说子组件影响到了父组件
如果要传值可以通过一下形式：

//通过使用$emit()的第二个参数传值
<button @click="$emit('change1'，2)">change font size big</button>

//父组件中使用$event接收
 <font-test :meg=FontSize @change1=$event ></font-test>

组件插槽

前面说过，组件是创建一个标签。那么平时使用的标签中都可以放一些内容，组件化的标签应该也可以。但是在正式的实验中发现是不行的。那么，如果我一定要放呢，也不是不可以。只用slot标签就可以实现。

插槽的定义

 Vue.component('fontTest',{
            props: {
                meg:Number
            },
            data(){
                return {
                    title:"当前字号是："
                }
            },
            template:`<div>
            <span><h5>{{title + meg}}</h5></span>
            <br/>
            <slot></slot> //这里定义插槽
        </div>`
        })

插槽的使用

<font-test :meg=FontSize>这里写插槽的内容</font-test>

完整的例子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="vue.js"></script>
    <title>组件基础</title>
</head>
<body>


    <!-- 绑定样式，设置字体初始大小-->
    <div id="app" :style="{'font-size':FontSize+'em'}">
        <!-- meg是父组件向子组件传递的值 当前的字号-->
        <!-- @change值子组件向父组件传值-->
        <font-test :meg=FontSize @change1=handelChangeBig @change2=handelChangeLittle>这里是插槽哦！</font-test>
    </div>


    <script type="text/javascript">
        //定义名为子组件
        Vue.component('fontTest',{
            props: {
                meg:Number
            },
            // 组件内的data必须是一个函数，而不是对象
            data(){
                
                return {
                    title:"当前字号是："
                }
            },
            template:`<div>
            <span><h5>{{title + meg}}</h5></span>
            <slot></slot>
            <br/>
            <button @click="$emit('change1')">change font size big</button>
            <button @click="$emit('change2')">change font size little</button>
        </div>`
        })


        let vm =new Vue({
            el: '#app',
            data(){
                return {
                    FontSize: 2
                }
            },
            methods:{
                handelChangeBig () {
                    this.FontSize+=2;
                },
                handelChangeLittle(){
                    if(this.FontSize>2){
                        this.FontSize-=2;
                    }else{
                        alert("已是最小字号")
                    }

                }
            }
        })

    </script>
</body>
</html>

插槽的位置不仅可以放文字内容也可以放HTML的标签。

昵称太难想

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Vue组件，父子组件间的传值、插槽向组件传递内容

Vue组件基础Vue组件概述Vue组件概述vue中的组件个人理解就是创建一个标签，名字有自己决定。组件是可复用的vue实例，在开发中我么可以将经常重复使用的功能封装为组件，达到快捷便捷开发的目的。...
复制链接

扫一扫