vue 父页面使用props向子组件传值

我不是女神ヾ 2021-09-07 06:20 486阅读 0赞

参考链接: [vue之父子组件间通信实例讲解(props、 r e f 、 ref、 ref、emit)][vue_props_ r e f _ ref_ ref_emit].  
1.父页面给组件绑定要传递的方法和值，:传递的方法=“方法的值“

2.父页面对要传递的方法和值进行处理

--------------------

1.子页面通过props\[‘方法一’，‘方法二’\] 接受父页面的方法（方法包含值）

2.子页面通过data里定义值用来接收，然后直接在本页面使用

#### 父页面 ####

import dayucharts from '../ucharts-monthUsed-day.vue' //子组件
    	export default { 
    			components: { 
    				dayucharts  //挂载
    			},
    			data() { 
    				return { 
    					daydate:'',//ucharts传递的日期值
    					suvbackid:'',//ucharts传递的回路ids值
    				}
    			}
    		}

#### 子页面 ####

<template>
    	<view class="qiun-columns">
    		<canvas canvas-id="canvasColumn" id="canvasColumn" class="charts"></canvas>
    		
    		<view>{
       {backid}}</view> 
    		<view>{
       {daydate}}</view>
    	</view>
    </template>

export default { 
    		name: 'ucharts-monthUsed-day',
    		data() { 
    			return { 
    				backid: this.backid, //传过来的回路id，处理值在本页面使用
    				daydate: this.daydate, //选择的日期，处理值在本页面使用
    			}
    		},
    		
    		props: ['daydate', 'backid'], //通过props接受两个方法

然后当前页面直接使用this.property\[属性名\]，就可以直接使用父页面传递过来的值了

[vue_props_ r e f _ ref_ ref_emit]: https://www.jb51.net/article/140581.htm