vue父子,兄弟组件传值

一、父子组件通讯

子组件给父组件传值

1、子组件页面 childA

<template>
  <div class="childA">
    <div>
      这里是子组件childA的页面显示内容
    </div>
    <div @click="clickMe">
      定义一个点击方法叫clickMe
    </div>
  </div>
</template>
<script>
  export default{
    data(){
      return{
        childAMsg:'A'
      }
    },
    methods:{
      clickMe(){
        this.$emit('parentFunction',this.childAMsg)
        //用$emit给父组件传递一个parentFunction的事件
        //逗号传一个参数,例如就是后面this.childAMsg指向data里面定义的变量,或者是自己写的,接口啥的调用的数据等

        //父组件中接收-------    <childA @parentFunction="parentEvent"></childA>
        //父组件中的parentFunction就是childA页面传过来的事件,parentEvent是父组件这个事件的方法
      }
    }
  }
</script>

2、父组件页面 parent

<template>
  <div>
    <childA @parentFunction="parentEvent"></childA>
  </div>
</template>
<script>
  import childA from './childA'
  export default {
    components:{
      childA
    },
    data(){

    },
    methods:{
      //data就是子组件$emit传过来的数据
      parentEvent(data){
        console.log(data)   // A  
      }
    }
  }
</script>

父组件给子组件传值

1、先写一个父组件 parent

<template>
  <div>
    <childB :parent-msg="info"></childB>//parent-msg是自定义要传的参数的命名 //info是data里定义的参数
  </div>
</template>
<script>
  import childB from './childB'
  export default {
    components:{
      childB
    },
    data(){
      info:'我是父组件要传的值'
    },
    methods:{
      
    }
  }
</script>

2、再写一个子组件childB     需要用props去接收父组件传过来的值

<template>
  <div class="childB">
    <div>
      {{parentInfo}}
      <!--/渲染为:我是父组件要传的值/-->
    </div>
  </div>
</template>
<script>
  export default {
    props:['parentMsg'],//前面传过来的名字有 -  ,横杠后面的首个字母要大写
    data(){
      return{
        parentInfo:this.parentMsg  //可以直接用this.parentMsg获取传过来的值

      }
    },
    methods:{

    }
  }
</script>

兄弟组件传值

那就理解成为(子组件A传值------>>父组件------>>子组件B)完成兄弟间的传值

1、首先还是一个子组件A

<template>
  <div class="childA">
    <div>
      这里是子组件childA的页面显示内容
    </div>
    <div @click="clickMe">
      定义一个点击方法叫clickMe
    </div>
  </div>
</template>
<script>
  export default{
    data(){
      return{
        childAMsg:'A'
      }
    },
    methods:{
      clickMe(){
        this.$emit('parentFunction',this.childAMsg)
        //用$emit给父组件传递一个parentFunction的事件
        //逗号传一个参数,例如就是后面this.childAMsg指向data里面定义的变量,或者是自己写的,接口啥的调用的数据等

        //父组件中接收-------    <childA @parentFunction="parentEvent"></childA>
        //父组件中的parentFunction就是childA页面传过来的事件,parentEvent是父组件这个事件的方法
      }
    }
  }
</script>

2、然后还是一个父组件parent

<template>
  <div>
    <childA @parentFunction="parentEvent"></childA>
    <childB :parent-msg="info"></childB>
  </div>
</template>
<script>
  import childA from './childA'
  import childB from './childB'
  export default {
    components:{
      childA,
      childB
    },
    data(){
      return{
        info:"我是父组件传的值"
      }
    },
    methods:{
      //data就是子组件$emit传过来的数据
      parentEvent(data){
        console.log(data)   // A
        if(data == 'A'){
          this.info=data //传childA页面的data
        }
      }
    }
  }
</script>

3、最后就是组件childB    需要用props去接收父组件传过来的值 

用计算属性去改变parentMsg

<template>
  <div class="childB">
    <div>
      <!--/渲染为:我是父组件传的值/-->
      {{parentInfo}}
      <!--点击后渲染为:A-->
    </div>
  </div>
</template>
<script>
  export default {
    props:['parentMsg'],//前面传过来的名字有 -  ,横杠后面的首个字母要大写
    data(){
      return{
      }
    },
    computed:{
      parentInfo(){
        console.log(this.parentMsg)   //一开始是 '我是父组件传的值'
        return this.parentMsg         //点击后变为 ‘A’
      }
    },
    methods:{

    },
    created(){
      console.log(this.parentMsg) //'我是父组件传的值'
    }
  }
</script>

 

### Vue 3 父子组件教程 在 Vue 3 中,父子组件之间的数据递主要通过 `props` 和 `emit` 实现。父组件可以通过 `props` 将数据递给子组件,而子组件则可以通过 `emit` 触发事件将数据回给父组件。 #### 父组件向子组件 父组件可以使用 `props` 向子组件递数据。以下是一个完整的示例: ```vue <!-- ParentComponent.vue --> <template> <div> <h1>父组件</h1> <p>当前:{{ inputValue }}</p> <ChildComponent :value="inputValue" @update:value="handleInput" /> </div> </template> <script setup> import { ref } from 'vue'; import ChildComponent from './ChildComponent.vue'; // 定义父组件的数据 const inputValue = ref('初始'); // 处理子组件的更新事件 const handleInput = (newValue) => { inputValue.value = newValue; }; </script> ``` 在此示例中,父组件通过 `:value` 将数据递给子组件,并监听 `update:value` 事件以接收子组件的更新[^1]。 #### 子组件向父组件 子组件可以通过 `emit` 方法将数据发送回父组件。以下是子组件的实现: ```vue <!-- ChildComponent.vue --> <template> <div> <h2>子组件</h2> <input :value="modelValue" @input="updateValue" /> </div> </template> <script setup> defineProps({ modelValue: { type: String, required: true } }); const emit = defineEmits(['update:modelValue']); const updateValue = (event) => { emit('update:modelValue', event.target.value); }; </script> ``` 在这个例子中,子组件通过监听 `input` 事件来捕获用户的输入,并通过 `emit` 方法触发 `update:modelValue` 事件将新递给父组件。 #### 使用 `v-model` 简化双向绑定 Vue 3 支持通过 `v-model` 实现父子组件之间的双向绑定。以下是如何结合 `v-model` 使用的示例: ```vue <!-- ParentComponent.vue --> <template> <div> <h1>父组件</h1> <p>当前:{{ inputValue }}</p> <ChildComponent v-model="inputValue" /> </div> </template> <script setup> import { ref } from 'vue'; import ChildComponent from './ChildComponent.vue'; const inputValue = ref('初始'); </script> ``` ```vue <!-- ChildComponent.vue --> <template> <div> <h2>子组件</h2> <input :value="modelValue" @input="updateValue" /> </div> </template> <script setup> defineProps({ modelValue: { type: String, required: true } }); const emit = defineEmits(['update:modelValue']); const updateValue = (event) => { emit('update:modelValue', event.target.value); }; </script> ``` 通过 `v-model`,父组件和子组件之间的数据绑定变得更加简洁和直观。 #### 注意事项 - 父组件向子组件递数据时,确保 `props` 的类型与数据一致。 - 子组件向父组件递数据时,推荐使用标准化的事件名称(如 `update:modelValue`),以便代码更具可读性[^2]。 --- ###
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值