vue组件(父子,兄弟)间传值调用方法

父组件向子组件传值
1.1.在父组件App.vue中引入子组件
<script>
import v-header from "@/component/header.vue"
  export default {
 
    components:{
            v-header
    }
}
</script>
1.2.父组件App.vue调用子组件header.vue的时候 绑定动态属性
<template>
  <div id="app">
        <v-header :title="title"></v-header>
  </div>
</template>
1.3.在子组件header.vue<script/>标签里边使用props接受父组件传过来的参数的
<script>
	export default {
 		props:['title']
	}
</script>

props更多校验方法

<script> 
  props: {
    // 基础的类型检查 (`null` 匹配任何类型)
    propA: Number,
    // 多个可能的类型
    propB: [String, Number],
    // 必填的字符串
    propC: {
      type: String,
      required: true
    },
    // 带有默认值的数字
    propD: {
      type: Number,
      default: 100
    },
    // 带有默认值的对象
    propE: {
      type: Object,
      // 对象或数组默认值必须从一个工厂函数获取
      default: function () {
        return { message: 'hello' }
      }
    },
    // 自定义验证函数
    propF: {
      validator: function (value) {
        // 这个值必须匹配下列字符串中的一个
        return ['success', 'warning', 'danger'].indexOf(value) !== -1
      }
    }
</script> 
1.4.在子组件header.vue中直接使用
<template>
    <div>
        <h2>我是一个头部组件--{{title}}</h2>
    </div>
</template>
子组件使用父组件中的方法
父组件代码
<template>
  <div id="App">
    <v-header :run='run'></v-header>
  </div>
</template>
 
<script>
import v-header from "@/component/header.vue"
  export default {
        data(){
            return{
                msg:"我是一个父组件",
                title:'标题',
                list:[],
            }
        },
        methods:{
            run(data){
                alert('我是父组件的run方法'+data);
            }
 
        },
        components:{
            v-header
        }
}
</script>
子组件代码
<template>
    <div>
        <button @click="run('123')">执行run方法</button>
    </div>
</template>
<script>
    export default {
        props:['run']
    }
</script>
方法名实例
父组件主动获取子组件的数据和方法:1.调用子组件的时候定义一个ref。如:<v-header ref="header"></v-header>。2.在父组件里面通过this.$refs.header.属性、this.$refs.header.方法获取
子组件主动获取父组件的数据和方法在子组件里面通过this.$parent.数据、this.$parent.方法获取
非父子组件之间相互传值定义事件this.$emit('名称','数据') 。其他组件调用事件this.$on('名称',function(){})
### Vue3 中父子组件方法调用 #### 父组件向子组件递属性 (Props)Vue3 中,父组件可以通过 `props` 向子组件递数据。这通常用于单向下行通信,即从父到子的数据流动。 ```html <!-- ParentComponent.vue --> <template> <ChildComponent :message="parentMessage" /> </template> <script setup> import { ref } from 'vue'; const parentMessage = ref('Hello Child'); </script> ``` 子组件接收这些属性并将其作为只读变量处理: ```html <!-- ChildComponent.vue --> <template> <p>{{ message }}</p> </script> <script setup> defineProps(['message']); </script> ``` 这种方式确保了数据流清晰可见,并保持良好的封装性[^2]。 #### 子组件向父组件发送消息 ($emit) 对于自下而上的通讯需求,则可以利用 `$emit()` 方法触发自定义事件通知父级更新状态或执行特定逻辑操作。 ```html <!-- ChildComponent.vue --> <button @click="$emit('updateParent', newValue)">Update Parent Value</button> ``` 对应的父组件监听此事件并对之作出响应: ```html <!-- ParentComponent.vue --> <ChildComponent @update-parent="handleValueChange"/> ... methods: { handleValueChange(newValue){ console.log(`New value received:${newValue}`); } } ``` 这种机制允许灵活地建立双向交互模式而不破坏原有架构设计原则[^3]. #### 调用组件内部函数 有时可能需要直接访问某个嵌套较深的孩子实例中的公共 API 。为此可以在模板里给目标元素加上引用标记(ref),之后便可通过该句柄来操纵它所指向的对象。 ```html <!-- ParentComponent.vue --> <template> <child-component ref="myChild"></child-component> </template> <script setup> import { onMounted, ref } from "vue"; let myChild = ref(null); onMounted(() => { if(myChild.value && typeof myChild.value.someMethod === 'function'){ myChild.value.someMethod(); } }); </script> ``` 注意这里使用的是组合式API (`setup`)语法糖形式下的写法,在选项式API中会略有不同[^4]. #### 定义暴露接口(expose) 为了让外部能够安全可靠地获取到某些成员变量或是调用指定的服务端口,可在子组件内声明哪些部分是可以被外界接触得到的。 ```javascript // ChildComponent.vue export default{ ... expose:['publicApi'], methods:{ publicApi(){ alert("This is a exposed method"); } } }; ``` 这样做的好处在于既保护了私有字段不被随意篡改同时也提供了必要的开放程度满足实际应用场景的需求[^1].
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值