20 Vue父子组件传值

最新推荐文章于 2023-02-28 12:30:40 发布

Civitasv

最新推荐文章于 2023-02-28 12:30:40 发布

阅读量172

点赞数

分类专栏： Vue 文章标签： vue 父子组件传值 components template

本文链接：https://blog.csdn.net/qq_40996400/article/details/104413508

版权

Vue 专栏收录该内容

36 篇文章 2 订阅

订阅专栏

父子组件传值

A 父组件向子组件传值

父组件可以在引用子组件的时候，通过属性绑定的形式，把数据传递给子组件

父组件可以在引用子组件的时候，通过事件绑定的形式，把方法传递给子组件

下面是一个例子：

<!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>父子组件</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

</head>

<body>
    <div id="app">
        <!--父组件可以在引用子组件的时候，通过属性绑定的形式，把数据传递给子组件-->
        <!--父组件可以在引用子组件的时候，通过事件绑定的形式，把方法传递给子组件-->
        <comp v-bind:parentmsg="msg" v-on:func="show"></comp>
    </div>
    <template id="templ">
        <div>
            <h3>子组件--{{parentmsg}}</h3>
            <input type="button" value="触发父组件方法" @click="myclick">
        </div>
    </template>

    <script>
        var vm = new Vue({
            el: "#app",
            data: {
                msg: "hello"
            },
            methods: {
                show() {
                    console.log("父show方法")
                }
            },
            components: {
                comp: {
                    template: "#templ",
                    // 用于接收父组件传回的值
                    props: ['parentmsg'],
                    methods: {
                        myclick() {
                            // 调用父组件传回的func方法
                            this.$emit("func")
                        }
                    },
                }
            }
        })
    </script>
</body>

</html>

请牢记：绑定的值需要使用props数组进行接收，且不能有大写。props数组中的数据最好不要更改，如果涉及到需要改变的数据，最好使用data对象。

B 子组件向父组件传值

子组件向父组件传值其实是通过绑定父组件的方法实现的，以下为一个例子：

<body>
    <div id="app">
        <!--父组件可以在引用子组件的时候，通过事件绑定的形式，把方法传递给子组件-->
        <comp v-on:func="show"></comp>
    </div>
    <template id="templ">
        <div>
            <input type="button" value="触发父组件方法" @click="myclick">
        </div>
    </template>

    <script>
        var vm = new Vue({
            el: "#app",
            data: {
                msg: "hello"
            },
            methods: {
                show(data) {
                    console.log("父show方法获取子组件的值:" + data)
                }
            },
            components: {
                comp: {
                    template: "#templ",
                    methods: {
                        myclick() {
                            // 调用父组件传回的func方法
                            this.$emit("func", 123)
                        }
                    },
                }
            }
        })
    </script>
</body>