Vue.js的父子组件通信

最新推荐文章于 2025-05-14 15:51:29 发布

原创最新推荐文章于 2025-05-14 15:51:29 发布 · 298 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#父子组件通信 #vue

Vue 专栏收录该内容

5 篇文章

订阅专栏

博客介绍了Vue中父子组件通信时，父组件将数据传给子组件的方法。父组件通过属性绑定传递数据，子组件在配置项里用props接收，可对数据做类型验证，接收的属性还能当作变量使用，同时提到需引入CDN的vue.js文件。

父子组件通信：父组件将自己的数据传给子组件

1.父组件将自己的数据通过属性绑定的形式传给子组件

aa在这里就是传递的自定义属性
2.子组件在自己的配置项里通过props来接收这个属性
Vue.component(‘Son’, {
template: ‘#son’,
props: {
‘aa’: Number
}
})
属性：属性的数据类型-- 这样是为了给数据做属性验证，验证数据类型
也可以写成props：[‘aa’]
3.这个属性也可以当作变量一样使用

这是基本的html结构

 <div id="app">
        <Father></Father>
    </div>
    <template id="father">
      <div>
        <h3>this is father</h3>
        <Son :aa="money"></Son>
      </div>
    </template>
    <template id="son">
      <div>
        <h3>this is son</h3>
        <p>father will give $&nbsp;{{ aa }} to his son</p>
      </div>
    </template>

这是基本的js逻辑，前提是你要引入CDN的vue.js文件哦

Vue.component("Father", {
            template: "#father",
            data() {
                return {
                    money: 2000
                };
            }
        });
        Vue.component("Son", {
            template: "#son",
            props: {
                'aa': Number
            }
        });

        new Vue({
            el: "#app"
        });