Vue父子组件传递/父传子

最新推荐文章于 2025-04-17 19:22:45 发布

orange--c

最新推荐文章于 2025-04-17 19:22:45 发布

阅读量265

点赞数

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

本文链接：https://blog.youkuaiyun.com/m0_52173534/article/details/118122999

版权

vue 专栏收录该内容

7 篇文章

订阅专栏

Vue父传子，意思就是子组件可以从父组件里拿数据使用

1.先看代码，讲解在下面

<body>
//父组件
<div id="app">
    <cpn3 :ctitle="title"></cpn3>
</div>
//子组件
<template id="cpn3">
    <div>
        <h1>{{ctitle}}</h1>
        <p>orange</p>
    </div>
</template>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
    //子组件
    Vue.component("cpn3", {
        template: "#cpn3",
        // 组件里的data是一个函数，必须要返回一个对象，变量写在返回对象里
        props: {
            ctitle: {
                type: String,
                default () {
                    return {}
                }
            }
        }
    })
	//父组件
    const app = new Vue({
        el: "#app",
        data: {
            title: 'orange'
        },
        methods: {},

    })
</script>
</body>

讲解：
1.先写出基本的模板分离组件

2.在子组件中加入props属性，用对象方式，，在props里面可以写你需要传的参数，参数也用对象方式，代码比较清晰，

	 //子组件
    Vue.component("cpn3", {
        template: "#cpn3",
        // 组件里的data是一个函数，必须要返回一个对象，变量写在返回对象里
        props: {
            ctitle: {
            //参数也使用对象形式，type传类型  default函数，是在找不到参数时返回一个值显示
                type: String,
                default () {
                    return {}
                }
            }
        }
    })

2.然后在父组件中加入需要的属性

//父组件
    const app = new Vue({
        el: "#app",
        data: {
        //这里的title就是要传入子组件的属性  在父组件中定义
            title: 'orange'
        },
        methods: {},

    })

3.在父组件中绑定两个参数

 <div id="app">
	//可以理解为将父组件中title 赋值给 ctitle，这样子组件就可以使用父组件的data属性了
    <cpn3 :ctitle="title"></cpn3>
</div>

4.最后在在子组件中要使用子组件定义的属性名

//子组件
<template id="cpn3">
    <div>
    //这里的属性名为ctitle
        <h1>{{ctitle}}</h1>
    </div>
</template>

ps：如果还不懂Vue基础创建组件的可以查看之前的博客
https://blog.youkuaiyun.com/m0_52173534/article/details/118119256?spm=1001.2014.3001.5501