Vue通信组件

摇头的金丝猴

已于 2022-02-12 20:13:07 修改

阅读量348

点赞数

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

于 2022-02-08 21:25:54 首次发布

本文链接：https://blog.youkuaiyun.com/m0_61382303/article/details/122831439

版权

vue 专栏收录该内容

7 篇文章

订阅专栏

本文详细介绍了Vue.js中父子组件之间的数据通信方法。首先展示了如何通过`@click`事件从子组件向父组件传递数据，然后在父组件的方法中接收并打印这些数据。接着，讨论了父组件向子组件传递数据的过程，利用`props`属性将数据暴露给子组件，并在子组件中直接使用。这两个方向的数据通信是Vue组件间交互的基础，对于理解和构建复杂的Vue应用至关重要。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

子传父

内置组件之间写一个事件 @click="enters" 第一步
在自定义组件中设置methods 定义函数方法 this.$emit('组件中定义的名称',data里面的数据) 第二步
在父级methods中声明函数方法 bbb(e){e 就是子组件里面data的参数}

<div class="box">
        <h1>{{info.name}}--{{info.age}}--{{info.city}}</h1>
        <h2>
            <name1 @aaa="bbb" :arr="info"></name1>
        </h2>
    </div>

    <script>
        new Vue({
            el: '.box',
            data: {
                info: {
                    name: "吴永谊",
                    age: 18,
                    city: '北京'
                }
            },
            methods: {   
              bbb(e){
                 console.log(e)   //第三步 获取数值
             },
            components: {
                name1: {            //  第一步 定义点击事件
                    template: `<p @click="enters">{{infoNew.uname}}</p>`,
                    data() {
                        return {
                            infoNew: {
                                uname: '王添豪',
                                uage: 10,
                                ucity: '埃及'
                            }
                        }
                    },
                    methods: {           //第二步 处理函数
                        enters() {
                            this.$emit('aaa', this.infoNew)
                        }
                    },
                }
            }
        })
    </script>

父传子

在模板中定义:arr="data里面参数" 暴露出去
在内置组件中用props以数组的形式接受 props:[arr]
就可以在内置组件中直接使用了

<div class="box">
        <h2>
            <name1 :arr="info"></name1>
        </h2>
    </div>
    <script>
        new Vue({
            el: '.box',
            data: {
                info: {
                    name: "吴永谊",
                    age: 18,
                    city: '北京'
                }},
            components: {
                name1: {
                    template: `<p @click="enters">{{arr.name}}</p>`,
                    data() {
                        return {
                            infoNew: {
                                uname: '王天豪',
                                uage: 10,
                                ucity: '埃及'
                            }}},
                    props: ['arr']
                }
            }
        })
    </script>