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通信,必须借助父组件。