Vue组件传值之子传父

最新推荐文章于 2024-05-30 15:26:53 发布

Lukeyyyy

最新推荐文章于 2024-05-30 15:26:53 发布

阅读量183

点赞数

分类专栏： vue 文章标签： vue

本文链接：https://blog.csdn.net/Luceyyy/article/details/110275757

版权

vue 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

原理：父组件将方法的引用，传递到子组件内部，子组件在内部调用父组件传递过来的方法，同时把要发送给父组件的数据，在调用方法的时候当作参数传递进去；
父组件将方法的引用传递给子组件，其中，getMsg是父组件中methods中定义的方法名称，func是子组件调用传递过来方法时候的方法名称

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

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
</head>

<body>

    <div id="app">
        //使用 '@' 也就是 v-on的方法把子组件的methods方法传给父组件
        <v-one @func="getMsg"></v-one>

    </div>
    <template id="temp1">
        <div>

            //调用父传过来的methods方法
            <button @click="sendMsg">向父组件传值!</button>

        </div>
    </template>
    <script src="../vue.js"></script>
    <script>
        var vOne = {
            template: "#temp1",
            methods: {
                sendMsg() {
                    // 通过 this.$emit("自己定义的方法名","传输的值") 调用父组件传递过来的方法，同时把数据传递出去
                   this.$emit('func', '我是被传过来的值');
                }
            },
         

        }
        //父组件
        let vm = new Vue({
            el: '#app',
      
            methods: {
            //定义方法用形参接收被传过来的值
                getMsg(data) {
                    console.log("data");
              
                }
            },
            components: {
                vOne
            }
        });
    </script>
</body>

</html>

Lukeyyyy

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
Vue组件传值之子传父

原理：父组件将方法的引用，传递到子组件内部，子组件在内部调用父组件传递过来的方法，同时把要发送给父组件的数据，在调用方法的时候当作参数传递进去；父组件将方法的引用传递给子组件，其中，appchild是父组件中methods中定义的方法名称，func是子组件调用传递过来方法时候的方法名称<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" /> <meta na.
复制链接

扫一扫