vue父组件如何向子组件传参,子组件如何修改父组件的值,字父组件的通信问题的探索

1.父组件向子组件传参

首先在子组件中定义props

  props:{
    categoriesVal: {
      type: Object,
      default : []
    },
  },

按照数据类型定义好type。

然后在父组件中准备好对应类型的数据,然后在调用子组件的地方进行绑定

 <left-side-bar :categories-val="categories"></left-side-bar>

通过:categories-val="categories"进行绑定,其中categories-val是子组件中定义的props,后面那个是父组件的数据变量名。

这样做以后,父组件的值就可以传到子组件,并且可以在子组件中进行使用。

需要注意的就是,在子组件中定义的形式是驼峰命名,在父组件中推荐使用-取缔大写字母进行连接。

2.子组件修改父组件的值

如果想进行修改,可以使用一个简单的办法,父组件在绑定的时候,使用.sync修饰符。例如:

<left-side-bar :list-articles.sync="listArticles"></left-side-bar>

然后当我们需要修改父组件的数据的时候,调用以下方法即可:

this.$emit('update:list-articles', this.articles);

后面的this.articles由子组件提供

3.子组件向父组件传值

vue中,父子组件的关系可以总结为prop向下传递,事件向上传递。父组件通过prop给子组件下发数据,子组件通过事件给父组件发送信息。
vue父组件如何向子组件传参,子组件如何修改父组件的值,字父组件的通信问题的探索插图
每个Vue实例都实现了事件接口:使用$on(evntName)监听事件;使用$emit(eventName,optionalPayload)触发事件。另外,父组件可以在使用子组件的地方直接用v-on来监听子组件触发的事件。

父组件在组件上定义了一个自定义事件childFn,事件名为parentFn用于接受子组件传过来的message值。

<!-- 父组件 -->
<template>
    <div class="test">
      <test-com @childFn="parentFn"></test-com>
      <br/> 
      子组件传来的值 : {{message}}
    </div>
</template>

<script>
export default {
    // ...
    data() {
        return {
             message: ''
        }
    },
    methods: {
       parentFn(payload) {
        this.message = payload;
      }
    }
}
</script>

子组件是一个buttton按钮,并为其添加了一个click事件,当点击的时候使用$emit()触发事件,把message传给父组件。

<!-- 子组件 -->
<template> 
<div class="testCom">
    <input type="text" v-model="message" />
    <button @click="click">Send</button>
</div>
</template>
<script>
export default {
    // ...
    data() {
        return {
          // 默认
          message: '我是来自子组件的消息'
        }
    },
    methods: {
      click() {
            this.$emit('childFn', this.message);
        }
    }    
}
</script>

这样我们就基本实现了子组件向父组件发送值

版权声明:
作者:北忘山
文章:vue父组件如何向子组件传参,子组件如何修改父组件的值,字父组件的通信问题的探索
链接:https://www.beiwangshan.com/archives/239.html
来源:beiwangshan.com
文章版权归作者所有,未经允许请勿转载。
THE END
分享
二维码
打赏
< <上一篇
下一篇>>