Vue使用props传递数据

素颜马尾好姑娘i 2021-09-27 14:28 547阅读 0赞

### 1. Vue使用props传递数据 ###

组件不仅仅是用来进行内容的复用，更重要的是组件之间的要进行通信。通常父组件的模板中包含子组件，父组件要正向的向子组件传递数据或参数，子组件接受到后根据参数额不同来渲染不同的内容或执行操作。这个正向传递的过程就是通过props来实现的。

在组件中，使用选项props来声明需要从父级接受的数据，props的值可以是两种，一种是数组，一种是对象。

数组的方式：props后边是数组的形式

<div id="app">
    		<my-component></my-component>
    	</div>
    
    	<script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
    	<template id="myComponent">
    		<div message='来自父组件的数据'></div>
    	</template>
    	
    	<script type="text/javascript">
    		Vue.component('my-component',{
    			props:['message'],
    			template : '#myComponent',
    		});
    
    		new Vue({
    			el:"#app",
    		});
    	</script>

渲染的结果是：![70][]

props与data函数中return的数据的主要区别：props是来自父级，而data中的是组件自己的数据。作用域是组件的本身。这两种数据都可以在模板template以及计算属性和mothods中使用。（作用的区域不同）

有的时候从父级传递过来的数据并不是写死的，而是来自父级的动态数据，这时候使用指令v-bind来动态绑定props的值，当父组件的数据发生变化的时候，也会传递给子组件。  很好的一个例子：如下

<div id="app">
    		<input type="text" v-model="parentMessage">
    		<my-component :message="parentMessage"></my-component>
    	</div>
    
    	<script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
    	<template id="myComponent">
    		<div :message='message'>{
       {message}}</div>
    	</template>
    	
    	<script type="text/javascript">
    		Vue.component('my-component',{
    			props:['message'],
    			template : '#myComponent',
    		});
    
    		new Vue({
    			el:"#app",
    			data:{
    				parentMessage:''
    			}
    		});
    	</script>

### 2 单向数据流 ###

Vue2.0以后就开始的是单向数据流，意思是父组件可以给子组件传递数据，但是反过来不行。在Vue1.0可以通过.sync修饰符来支持双向传递。Vue2.0这样设计的好处是让父组件和子组件之间解耦。在JS中对象和数组是引用类型，指向的同一个地址，所以当子组件发生改变了，父组件也会随之改变。为了避免这种情况的发生，采用的单向数据流。

大多数的业务中，子组件接受到了父组件的数据，会进行改变...  所以处理这种情况常采用以下的两种方式。

1. 在组件**data**中再声明一个数据引用父组件传来的数据，然后在子组件对新声明的数据进行操作即可，例子：

<div id="app">
    		<my-component :message="111"></my-component>
    	</div>
    
    	<script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
    	<template id="myComponent">
    		<div :message='newData'>{
       {newData}}</div>
    	</template>
    	
    	<script type="text/javascript">
    		Vue.component('my-component',{
    			props:['message'],
    			template : '#myComponent',
    			data: function(){
    				return{
    					newData: this.message,
    				}
    			}
    		});
    
    		new Vue({
    			el:"#app",
    			data:{
    				parentMessage:''
    			}
    		});
    	</script>

2. 另一种情况是prop作为需要被转变的原始值传入。这种情况用计算属性。比如这种情况，用CSS传递宽度的时候要带单位（px），但是每次写很麻烦，而且数值计算一般不带单位的，所以统一在组件的计算属性中就可以了

[70]: /images/20210923/96dbe918da304b4d81beb0c3132e18b0.png