Vue.js的父子组件通信

最新推荐文章于 2024-08-07 15:56:34 发布

MiniCai_

最新推荐文章于 2024-08-07 15:56:34 发布

阅读量239

点赞数

分类专栏： Vue 文章标签：父子组件通信 vue

本文链接：https://blog.csdn.net/MiniCai_/article/details/90679232

版权

Vue 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

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

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"
        });