Vue父子组件通信

最新推荐文章于 2020-04-13 21:59:19 发布

兵腾傲宇

最新推荐文章于 2020-04-13 21:59:19 发布

阅读量225

点赞数

分类专栏： Vue 组件父子组件通信通信

本文链接：https://blog.csdn.net/qq_23334071/article/details/80689836

版权

Vue 同时被 3 个专栏收录

10 篇文章 0 订阅

订阅专栏

组件

6 篇文章 0 订阅

订阅专栏

父子组件通信

1 篇文章 0 订阅

订阅专栏

vue的props和$emit / 父子组件通信

1、props接受父元素的数据,通过属性进行传递girls和noticeGirl

<child :girls="aGirls" :noticeGirl="noticeGirl" @introduce="introduceSelf"></child>

2、$emit将子元素的数据发射出去,传递给父元素

this.$emit('introduce', emitData);

搞懂props与$emit即可理解父子通信模式

不废话，上代码

<!DOCTYPE html>
<html>
<head>
    <title>vue2.0---父子组件通信</title>
</head>
<body>
    <h3>vue2.0父子组件通信</h3>

    <div id='app'>
        <father></father>
    </div>

    <!-- 父模板套子模板 -->
    <template id="father">
        <div>
            <h3>{{name}}</h3>
            <p>群消息girl：</p>
            <div>
                {{somebody}} 说: 我 {{age}} 了。
            </div>
            <hr>
            <!-- 子模板 -->
            <child :girls="aGirls" :noticeGirl="noticeGirl" @introduce="introduceSelf"></child>
        </div>
    </template>
    
    <!-- 子模板 -->
    <template id="child">
        <div>
            <h5>{{name}}</h5>
            <div>
                <ul>
                    <li v-for="(value, index) in girls">
                        {{index}} - {{value.name}} - {{value.age}}
                        <button @click="noticeGroup(value.name, value.age,value)">发送消息</button>
                    </li>
                </ul>
            </div>
            <div v-if='noticeGirl'>接收来自大群的消息:{{noticeGirl}}</div>
            <div v-else>暂无来自大群的消息</div>
        </div>
    </template>

    <script src="vue_2.2.2_vue.min.js"></script>
    <script type="text/javascript">

        // 定义组件
        var FATHER = {
            template: "#father",
            data: function() {
                return {
                    name: '这是父组件',
                    aGirls: [
                        {name: '小丽', age: 22},
                        {name: '小美', age: 21},
                        {name: '小荷', age: 24}
                    ],
                    somebody: '',
                    age: '',
                    noticeGirl: ''
                }
            },
            methods: {
                introduceSelf: function(opt) {
                    console.log(opt);
                    this.somebody = opt.name;
                    this.age = opt.age;

                    // 通知girl收到消息
                    this.noticeGirl = opt.name + ',已收到消息';
                }
            },
            components: {
                'child': {
                    template: "#child",
                    data: function() {
                        return {
                            name: '子组件',
                        }
                    },
                    methods: {
                        noticeGroup(name, age, v) {
                            // console.log(v);
                            var emitData = {
                                name: name,
                                age: age
                            };
                            // $emit将子元素的数据发射出去,传递给父元素
                            this.$emit('introduce', emitData);
                        },
                    },
                    // props接受父元素的数据,通过属性进行传递girls和noticeGirl
                    props: {
                        girls: {
                            type: Array,
                            required: true
                        },
                        noticeGirl: {
                            type: String,
                            required: false
                        }
                    }
                }
            }
        };

        // 注册组件
        Vue.component('father', FATHER);

        var vm = new Vue({
            data: {},
        }).$mount('#app');
    </script>
</body>

</html>

兵腾傲宇

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
Vue父子组件通信

vue的props和$emit / 父子组件通信1、props接受父元素的数据,通过属性进行传递girls和noticeGirl&lt;child :girls="aGirls" :noticeGirl="noticeGirl" @introduce="introduceSelf"&gt;&lt;/child&gt;2、$emit将子元素的数据发射出去,传递给父元素this.$emit('intr...
复制链接

扫一扫