16 子组件和父组件之间传值

最新推荐文章于 2023-02-12 22:00:00 发布

学习总不晚

最新推荐文章于 2023-02-12 22:00:00 发布

阅读量159

点赞数

分类专栏： Vue 文章标签： component组件间传值

本文链接：https://blog.csdn.net/u013472738/article/details/100185762

版权

Vue 专栏收录该内容

29 篇文章 0 订阅

订阅专栏

划重点

子组件 / 父组件定义
组件中：props 的使用
组件中：data 的使用(有 return 返回值) ；区别：Vue中的data （没有返回值）;
组件方法中 emit 的使用：emit:英文原意是：触发、发射的意思
components :直接在Vue的方法中声明和绑定要使用的组件

小炒肉：温馨可口


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="./lib/vue-2.6.10.js"></script>
</head>

<body>
    <!--   需要实现的是：子组件 和 父组件（Vue）之间传值
    总体逻辑是：通过点击组件（子组件）事件调用 Vue中的函数；；而 在子组件中传值可以在Vue函数中进行使用
1: 在Vue中定义个 函数如： vuemethods() 
2:定义一个组件 点击组件 可以调用 Vue中的函数 vuemethods 方法；如果这个方法中有参数，可以通过组件传递参数给这个方法：vuementhods
 
    -->
    <div id="app">

        <!-- 在  组件：comname1中通过 绑定一个名字为：msgcom1 的事件：vuemethods 
        也即是： 把Vue中的函数：vuemethods 复制给 了一个在组件中名字为：msgcom1的函数属性
        这里的 msgcom1 可以自己任意命名
        -->
        <comname1 v-on:msgcom1="vuemethods"></comname1>

    </div>

    <template id="comname1">
        <div>
            <h3>{{ msg2 }}</h3>
            <a href="" @click.prevent="clickMsg">点击</a>
        </div>
    </template>
    <script>
        var comtem1 = {
            template: '#comname1',
            //注意：组件中的所有的 props中的数据；都是通过 父组件传递给子组件的
            //props中的数据 都是只能读 ；不能重新赋值    props是一个数组  ；；；
            //props主要是处理：子组件向父组件（Vue中的components）传递数据使用的； 如 在 emit中的参数 temmsg就是传递的值给 了Vue中的 methods--> vuemethods 中的参数
             props: ['msgcom1'],    //这个名字msgcom1 就是父组件传递过来的属性名字；
            data: function () {//这一行可以简写成：data(){}
                return { 
                    temmsg: 'temp中的data定义123456',
                    msg2:'22'
                 }

            },
            methods: {
                clickMsg() { //注意：如何使用  props 和  emit  ?
                //emit：英文原意是：发射/触发的意思 
                //this代表 comtem1 对应的上下文；
                //emit中的参数：第一个必是 对应的子组件的自定义的事件的名称：可以只有这一个参数：也即是只是调用了父组件的函数；不传递值如：
                //this.$emit('msgcom1') ；这是不带有参数的
                //如果带有参数；如一个参数或者两个或者多个；那么就是直接在后面依次写入就可以
                //如：带有两个参数（对应的父组件中的方法如果要使用这些参数；那么其父组件的方法也要是含有参数的 ）

                    this.$emit('msgcom1' ,this.temmsg,"-------我是参数2")
                }
            }
        }


        var vm = new Vue({
            el: '#app',
            data: {

            },
            methods: {
                vuemethods(data,data2) {
                    alert("组件之间传递～～～" +data+data2)
                }


            },
            components: {//comname1：组件的名字； comtem1：定义的template 的名称
                comname1: comtem1
            }

        })



    </script>
</body>

</html>

一张图片 ~ ~ ~

在这里插入图片描述

学习总不晚

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
16 子组件和父组件之间传值

划重点子组件 / 父组件定义组件中：props 的使用组件中：data 的使用(有 return 返回值) ；区别：Vue中的data （没有返回值）;组件方法中 emit 的使用：emit:英文原意是：触发、发射的意思components :直接在Vue的方法中声明和绑定要使用的组件小炒肉：温馨可口<!DOCTYPE html><html lang...
复制链接

扫一扫

专栏目录