Vue组件传值

最新推荐文章于 2023-09-09 19:40:32 发布

写写代码AAA

最新推荐文章于 2023-09-09 19:40:32 发布

阅读量121

点赞数

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

本文链接：https://blog.csdn.net/qq_28988969/article/details/103797038

版权

Vue 专栏收录该内容

22 篇文章 4 订阅

订阅专栏

子组件中，默认情况下无法访问到父组件中data上的数据和methods中的方法

父组件向子组件传值

定义子组件，props中设置需要父组件传入的参数名
子组件template中使用已经在props中设置的参数名
创建子组件时，通过属性绑定，设置需要传入的参数
注意：props中的参数，都是通过父组件传递给子组件的，且都是只读的

<body>
    <div id="app">
    	<!-- 创建组件时，通过属性绑定，设置需要传入的参数 -->
        <com1 :parentmsg="msg"></com1>
    </div>

    <template id="temp1">
        <div>
        	<!-- 使用父组件传入的参数 -->
            <p>子组件-{{parentmsg}}</p>
        </div>
    </template>

    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var vue = new Vue({
            el: "#app",
            data: {
                msg: "这是父组件的内容"
            },
            components: {
                com1: {
                    template: "#temp1",
                    // 设置需要父组件传入的参数名
                    // 注意：props中的参数，都是通过父组件传递给子组件的，且都是只读的
                    props: ["parentmsg"]
                }
            }
        })
    </script>
</body>

父组件向子组件传递方法

创建子组件时，通过方法绑定，设置需要传入的方法
在子组件内部，通过this.$emit调用
emit英文意思：触发，调用

<body>
    <div id="app">
    	<!-- 方法绑定，事件名func，func1都是自定义的，可以随意取 -->
        <com1 @func="show" @func1="show1"></com1>
    </div>

    <template id="temp1">
        <div>
            <input type="button" value="点击" @click="myclick" />
        </div>
    </template>

    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var vue = new Vue({
            el: "#app",
            methods: {
                show() {
                    alert("这是父组件不带参数的方法")
                },
                show1(arg1) {
                    alert("这是父组件带参数的方法，传递的参数：" + arg1)
                }
            },
            components: {
                com1: {
                    template: "#temp1",
                    methods: {
                        myclick() {
                        	// 调用父组件传递的无参方法
                            this.$emit("func")
                            // 调用父组件传递的有参方法
                            // emit 第一个参数：事件名，之后的参数：方法参数
                            this.$emit("func1", "子组件传递的参数")
                        }
                    }
                }
            }
        })
    </script>
</body>

子组件向父组件传值

借助父组件向子组件传递方法实现

<body>
    <div id="app">
    	<!-- 方法绑定，事件名func1都是自定义的，可以随意取 -->
        <com1 @func1="show1"></com1>
    </div>

    <template id="temp1">
        <div>
            <input type="button" value="点击" @click="myclick" />
        </div>
    </template>

    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var vue = new Vue({
            el: "#app",
            data: {
                sonmsg: ""
            },
            methods: {
                show1(arg1) {
                	// 把参数赋值给data中的参数
                    this.sonmsg = arg1
                    alert(this.sonmsg)
                }
            },
            components: {
                com1: {
                    template: "#temp1",
                    methods: {
                        myclick() {
                            // 调用父组件传递的有参方法
                            // emit 第一个参数：事件名，之后的参数：方法参数
                            this.$emit("func1", "子组件传递的参数")
                        }
                    }
                }
            }
        })
    </script>
</body>