父子传值！代码详解

最新推荐文章于 2022-08-11 14:32:06 发布

置顶小陈加油！

最新推荐文章于 2022-08-11 14:32:06 发布

阅读量2.4k

点赞数 4

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

本文链接：https://blog.csdn.net/weixin_52299403/article/details/112756571

版权

vue传值专栏收录该内容

1 篇文章 0 订阅

订阅专栏

父传子：

<body>
    <div id='app'>
        <songname title="我是父组件传来的"> </songname>
        <songname></songname>
        <songname :title="title"></songname>
    </div>
    <template id="login">
        <div>
            登录组件
            父组件传值：{{title}}
        </div>
    </template>
    <script>
        // 定义组件
        Vue.component("songname", {   //组件名
            template: "#login",   //组件id
            props: {
                // 1、 指定数据类型 title：string
                // 2、指定多种数据类型
                // title: [String, Number],
                // 3.指定默认数据
                title: {
                    type: String,
                    default: "课程标题",
                },
            }
        })

    </script>
    <script>
        const vm = new Vue({
            el: '#app',
            data: {
                title: "我是父组件传来的动态属性绑定"
            }
        })
    </script>

子传父：

<body>
    <!-- 父 -->
    <div id='app'>
        <!-- 子 -->
        <sonname @father="fatherchange"></sonname>
        {{sondata}}
    </div>
    <template id="login">
        <div>
            登录组件
            父组件传值：{{title}}
            <button @click="addDataTofather"> 点我干大事</button>

        </div>
    </template>
    <script>
        Vue.component("sonname", {
            template: "#login",
            props: {
                // 1.指定数据类型
                // title:String
                // 2指定多种数据类型
                // title:[String,Number]
                // 3指定默认数据
                // title:{
                //     type:String,
                //     default:"课程标题"
                // },
                title: {
                    type: [String, Number],
                    default: "课程标题"
                }

            },
            methods: {
                addDataTofather() {

                    this.$emit("father", "传过来的子组件数据")
                }
            },
        })

    </script>
    <script>
        const vm = new Vue({
            el: '#app',
            data: {
                title: "俺是父组件传来的动态属性绑定",
                sondata: ""
            },
            methods: {
                fatherchange(data) {
                    console.log(data);
                    this.sondata = data
                }
            },
        })
    </script>

小陈加油！

关注

4
点赞
踩
2

收藏

觉得还不错? 一键收藏
18
评论
父子传值！代码详解

父传子：<body> <div id='app'> <songname title="我是父组件传来的"> </songname> <songname></songname> <songname :title="title"></songname> </div> <template id="login">
复制链接

扫一扫