Vue项目中实现父子组件之间传值

1、路由配置：使用children属性实现路由嵌套，嵌套的组件关系就是父子组件关系

    {path: '/father',name: 'father',component: father,children: [{path: 'son',name: 'son',component: son}]}

2、组件传值-父组件向子组件传值

第一步：父组件在引用子组件时，通过属性绑定（v-bind：）的形式，把需要传递给子组件的数据，传递到子组件内部，供子组件使用

父组件：father.vue

<template><div><h1>父组件</h1><router-view v-bind:fData="data1" :fMessage="data2"></router-view></div>
</template><script>
export default {data () {return {data1: '父组件数据data1',data2: '父组件数据data2',};}
}
</script>

第二步：把父组件传递过来的数据，在 props数组中定义一下

组件中的所有props 中的数据，都是通过父组件传递给子组件的
props 中的数据都是只读的，无法重新赋值

第三步：在该子组件中使用props数组中定义好的数据

子组件：son.vue

<template><div><h1>子组件</h1><p>下面是父组件传过来的数据</p><p>第一个数据：{{fData}}</p><p>第二个数据：{{fMessage}}</p></div>
</template><script>
export default {props: ['fData', 'fMessage'],data () {return {};}
}
</script>

3、组件传值-父组件把方法传递给子组件

第一步：父组件向子组件传递方法，使用事件绑定机制 v-on，自定义一个事件属性，传递给子组件

父组件：father.vue

<template><div><h1>父组件</h1><router-view @show="showFather"></router-view></div>
</template><script>
export default {data () {return {};},methods: {showFather (a, b) {console.log('触发了父组件的方法' + '======' + a + '======' + b);}}
}
</script>

第二步：在子组件中定义一个方法，在方法中，利用 $emit 触发父组件传递过来的，挂载在当前实例上的事件，还可以传递参数

第三步：在子组件中调用定义的那个方法，就可以触发父组件传递过来的方法了

子组件：son.vue

<template><div><h1>子组件</h1><Button type="primary" @click="sonClick">触发父组件方法</Button></div>
</template><script>
export default {data () {return {};},methods: {sonClick () {this.$emit('show', 111, 222);}}
}
</script>

4、组件传值-子组件通过事件调用向父组件传值

在子组件中，利用 $emit 触发父组件传递过来的方法的时候，可以将子组件的数据当做参数传递给父组件

父组件：father.vue

<template><div><h1>父组件</h1><router-view @show="showFather"></router-view></div>
</template><script>
export default {data () {return {fromSon1: '',fromSon2: ''};},methods: {showFather (a, b) {this.fromSon1 = a;this.fromSon2 = b;console.log('触发了父组件的方法' + '======' + a + '======' + b);}}
}
</script>

子组件：son.vue

<template><div><h1>子组件</h1><Button type="primary" @click="sonClick">触发父组件方法</Button></div>
</template><script>
export default {props: ['fData', 'fMessage'],data () {return {sonMessage: '子组件数据sonMessage',sonData: '子组件数据sonData'};},methods: {sonClick () {this.$emit('show', this.sonMessage, this.sonData);}}
}
</script>

5、父子组件之间相互传值

父组件：father.vue

<template><div><h1>父组件</h1><Button type="primary" @click="getData">获取数据</Button><router-view v-bind:fData="data1" :fMessage="data2" @show="showFather"></router-view></div>
</template><script>
export default {data () {return {data1: '父组件数据data1',data2: '父组件数据data2',fromSon1: '',fromSon2: ''};},methods: {showFather (a, b) {this.fromSon1 = a;this.fromSon2 = b;console.log('触发了父组件的方法' + '======' + a + '======' + b);},getData () {console.log(this.fromSon1);console.log(this.fromSon2);}}
}
</script>

子组件：son.vue

<template><div><h1>子组件</h1><p>下面是父组件传过来的数据</p><p>第一个数据：{{fData}}</p><p>第二个数据：{{fMessage}}</p><Button type="primary" @click="sonClick">触发父组件方法</Button></div>
</template><script>
export default {props: ['fData', 'fMessage'],data () {return {sonMessage: '子组件数据sonMessage',sonData: '子组件数据sonData'};},methods: {sonClick () {this.$emit('show', this.sonMessage, this.sonData);}}
}
</script>

Vue项目中实现父子组件之间传值相关推荐

vue中，兄弟组件之间传值
vue中,兄弟组件之间传值项目中,需要使用多个子组件,当需要传递值的时候,较为麻烦,怎样实现呢 1.一般可以使用子组件a传递给父组件,再由父组件传递给子组件b.但是一般较为麻烦, 2.使用bus作为 ...
vue父子组件之间传值的方法
vue父子组件之间传值的方法一.基本父子传值父传子方式: props 效果: 把父组件的fatherName属性传入子组件,在子组件中使用父组件代码: <template>< ...
【微信小程序】父子组件之间传值
微信小程序父子组件之间传值有两种: 1.父组件向子组件传值 2.子组件向父组件传值区别: 父向子传值使用的是属性绑定,子组件中的properties对象进行接收父组件传递过来的值. 子向父传值使用的 ...
Vue项目中公用footer组件底部位置的适配问题
vue项目中公用footer组件底部位置的适配问题需求: footer为公用组件,其他页面都需要引入,这是会存在一种情况:有的页面高度很高,footer组件要放在内容的最后:有的页面内容很少,高度很 ...
Vue中关于父子组件之间的通信
父子组件之间的通信是vue中的基础知识,在此做一个简单的梳理. 总的来说父传子是通过props,子传父是通过$emit. 简单的一个demo来说说,先上代码父组件: 如图,HelloWorld是一个 ...
vue 项目中使用 Loading 组件
当在vue项目中请求后台接口时,常常会使用 loding 过渡数据的加载时间. 如果 loading 作为一个全局的加载状态,应该写在项目中的App.vue中 <template>< ...
Vue中父子组件之间传值，兄弟组件之间传值（两种方法）
一.父向子传值props 父组件向子组件传值: parent:<parent><child :message="msg"></child> // ...
Vue非父子组件之间传值
<!DOCTYPE html> <html><head><meta charset="utf-8"><title>非父子 ...
Vue父子组件之间传值
组件分两种,全局组件和局部组件全局组件这么写 Vue.component("nav-bar",{props:['navShow',"elecText",&qu ...

Vue项目中实现父子组件之间传值

1、路由配置：使用children属性实现路由嵌套，嵌套的组件关系就是父子组件关系

2、组件传值-父组件向子组件传值

3、组件传值-父组件把方法传递给子组件

4、组件传值-子组件通过事件调用向父组件传值

5、父子组件之间相互传值

Vue项目中实现父子组件之间传值相关推荐

最新文章

热门文章