vue学习笔记【九、组件通信】

props参数传递：适合父组件传值给子组件的情况

子组件：

<template>
	<div id="app">
		<div>
			<h4>姓名：{{name}}</h4>
			<h4>年龄：{{age}}</h4>
			<p>{{person}}</p>
			
			<!--子组件中点击按钮，调用父组件中的方法-->
			<button @click="logPerson('abc')">调用方法</button>
		</div>
	</div>
</template>

<script>
	export default{
		name:"ComputedAndWatch",
		
		
		//props:['name','age'],
		props:{
			name:{type:String,required:true,default:'aaaaaa'},//字符串
			age:Number,//数据
			person:Object,//对象
			logPerson:Function//函数
		}
	}
</script>

<style scoped>
	
</style>

父组件：

<template>
  <div id="app">
    <ComputedAndWatch name='aa' :age=12 :person='p':log-person='logPerson'/>			    	
  </div>
</template>

<script>
//1.引入组件
import ComputedAndWatch from './components/ComputedAndWatch.vue'

export default {
  name: 'App',
  data(){
			return {
				p:{
					name:'cx',
					age:90
				}
			}
		},
  //2.注册组件
  components: {
    ComputedAndWatch
  },
  methods:{
  	logPerson(name){
  		console.log('调用方法了。',name);
  	}
  }
}
</script>

<style>
</style>

使用props，如果需要向非子后代传递数据，需要多层逐层传递。兄弟组件之间不能直接props通信，必须借助父组件。