vue-----------实现子组件向父组件传值

最新推荐文章于 2024-07-12 21:26:02 发布

HongfeiAn

最新推荐文章于 2024-07-12 21:26:02 发布

阅读量189

点赞数

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

本文链接：https://blog.csdn.net/qq_41601327/article/details/107044778

版权

Vue 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

实现效果，点击按钮，子组件将传递值给父组件

<!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.js"></script>
</head>

<body>
    <div id="app">
        <!-- 父组件向子组件传递方法，使用的是，事件绑定机制；当我们自定义了一个事件属性之后，那么，子组件就能够，通过某些方式，来调用传递进去的这个方法 -->
        {{this.datamsgFormSon}}
        <com2 v-on:func="show"></com2>
    </div>
    <template id="tmp1">
        <div>
            <h1>这是子组件</h1>
            <input type="button" value="这是子组件中的按钮-点击它，触发父组件传递过来的func" @click="myclick">
        </div>
    </template>
    <script>
        //定义了一个字面量类型 组件模板对象
        var com2 = {
            template: '#tmp1', //通过制定了一个Id，表示说，要去加载这个指定I大的template元素中的内容，当作组件的HTML结构
            data() {
                return {
                    sonmsg: {
                        name: 'xtez',
                        age: 6
                    }
                }
            },
            methods: {
                myclick() {
                    //当点击子组件的按钮的时候，如何拿到父组件传递过来的func方法，并调用这个方法、
                    //emit英文原意：是触发，调用，发射的意思
                    // this.$emit('func', 123)
                    this.$emit('func', this.sonmsg)
                }
            }
        }

        var vm = new Vue({
            el: '#app',
            data: {
                datamsgFormSon:null,
            },
            methods: {
                show(data) {
                    // console.log('调用父组件上的show方法---' + data);
                    // console.log(data);
                    this.datamsgFormSon=data;
                }
            },
            components: {//组件
                com2
                //= com2:com2
            }
        });
    </script>
</body>

</html>