Vue 父子和子父组件通信

最新推荐文章于 2024-09-26 07:51:19 发布

weixin_45408068

最新推荐文章于 2024-09-26 07:51:19 发布

阅读量1.3k

点赞数

文章标签： Vue 父子组件通信子父组件通信

本文链接：https://blog.csdn.net/weixin_45408068/article/details/97821926

版权

父子组件通信

父组件中定义一个数据
data( ) { return { money: 1111 } }
在父组件的模板中，用 v-bind 将父组件的数据绑定在子组件身上
在子组件的选项中，通过props选项来接收这个属性
props : [ ’ aa ’ ]
这个属性可以在子组件的模板中以全局变量的形式使用

<body>
    <div id="app">
        <father></father>
    </div>
    <template id="father">
        <div>
            <p> hi~我是father </p>
            <hr>
            <son :aa="money"></son>
        </div>
    </template>
    <template id="son">
        <div>
            <p> hi~我是son , 老爸给了我{{aa}}元生活费 </p>
        </div>
    </template>
</body>
<script src="lib/vue.js"></script>
<script>
    Vue.component('Father', {
        template: '#father',
        data() {
            return {
                money: 1111
            }
        }
    })
    Vue.component('Son', {
        template: '#son',
        props: ['aa']
    })
    new Vue({
        el: '#app'
    })
</script>

在这里插入图片描述

子父组件通信

现在子组件中定义一个数据
data( ) { return { money: 2000 } }
在父组件中也定义一个数据，这个数据用来接收子组件传递过来的数据
data ( ) { return { bank: 1000 } }
在父组件中定义一个事件处理程序，用于改变父组件定义的数据，这个事件处理程序是有参数的，这个参数就是子组件传递过来的数据
methods: { bankAdd ( val ) { this.bank += val } }
将这个事件处理程序通过事件绑定的形式绑定在子组件身上
<Son @aa = “bankAdd”>
在子组件中定义一个事件处理程序，这事件处理程序中通过 this. $KaTeX parse error: Expected '}', got 'EOF' at end of input: \dotsive ( ) { this.$ emit ( ‘aa’ , this.money ) } }

<body>
    <div id="app">
        <Father/>
    </div>
    <template id="father">
       <div>
            <h3> 这里是父组件 </h3>
            <p> 我的私房钱有：{{ bank }} </p>
            <hr>
           <Son @aa = "bankAdd"></Son>
       </div>
    </template>
    <template id="son">
      <div>
        <h4> 这里是子组件 </h4>
        <button @click = " give "> 给老爸红包 </button>
      </div>
    </template>
</body>
<script src="../../lib/vue.js"></script>
<script>
 Vue.component('Father',{
    template: '#father',
    data () {
      return {
        bank: 1000
      }
    },
    methods: {
      bankAdd ( val ) { //val就是子组件给的数据
        this.bank += val 
      }
    }
  })
  Vue.component('Son',{
    template: '#son',
    data () {
      return {
        money: 2000
      }
    },
    methods: {
      give () { 
      // this.$emit('aa',传递给父组件的参数)
         this.$emit('aa',this.money)
      }
    }
  })
  new Vue({
    el: '#app'
  })
</script>

实现点击发红包，私房钱金额每次增加2000，显示如下：
在这里插入图片描述