Vue组件通信（传值与函数调用） |
您所在的位置：网站首页 › 函数组件传值 › Vue组件通信（传值与函数调用） |
Vue组件通信（传值与函数调用）
|
Vue组件通信（传值与函数调用）
传值
父组件向子组件传值
子组件向父组件传值
平级组件传值
vue高级组件之provide、inject
函数调用
子级调用父级函数
父级调用子级函数
平级组件函数调用
传值
父组件向子组件传值
子组件在props中创建一个属性，用以接收父组件传过来的值 父组件中注册子组件 在子组件标签中添加子组件props中创建的属性 把需要传给子组件的值赋给该属性 /* 父组件 */ import Child from '../components/Child' export default { name: "Parent", components: { Child }, data(){ return{ Msg:"Message From Parent" } } }; /* 子组件 */ Child 子组件 { { message}} export default { name: "Child", props:["message"] };页面显示如下。 子组件中需要以某种方式例如点击事件的方法来触发一个自定义事件 将需要传的值作为$emit的第二个参数，该值将作为实参传给响应自定义事件的方法 在父组件中注册子组件并在子组件标签上绑定对自定义事件的监听 /* 子组件 */ Child 子组件 向父组件传值 export default { name: "Child", methods:{ SendMsgToParent(){ this.$emit('ListenChildEvent','Message From Child') } } }; /* 父组件 */ |
【本文地址】
今日新闻 |
推荐新闻 |