父组件给子组件传值
1.父组件调用子组件的时候 绑定动态属性,将listId传给子组件 [:listId="id"]
<template>
<v-card>
<v-tabs-items >
<v-tab-item key="1"> <!-- 组件1-->
<tab1 :listId="id"></tab1>
</v-tab-item>
<v-tab-item key="2"> <!-- 组件2-->
</v-tab-item>
</v-tabs-items>
</v-card>
</template>
<script>
import tab1 from './components/tab1'
import axios from 'axios'
export default {
name: 'Home',
components: {
tab1
},
data () {
return {
id: "",
},
},
methods: {
getId(){
//.....
this.id=res.value;
}
}
}
</script>
2、 在子组件里面通过 props接收父组件传过来的数据
<template>
<v-card>
{
{listId}} //父组件传过来的值直接展示在页面上
</v-card>
</template>
<script>
export default {
name: 'ListView',
props: {
listId: String //listId是string类型
},
data () {
return {
newlistId: "",
}
},
//监听listId的值,当它由空转变时就会触发,这时候就能取到了,拿到值后要传值到data的newListId中
watch: {
listId: function (newData) {
this.newListId = newData
this.getListId(this.newListId)
}
},
methods: {
getListId (res) {
console.log(this.newListId)
}
}
</script>
type:用于限定传入参数的数据类型,可以是下列原生构造函数中的一种:String、Number、Boolean、Array、Object、Date、Function、Symbol、任何自定义构造函数、或上述内容组成的数组。
default:用于指定一个默认值。如果没有传入参数,则使用默认值。对象或数组的默认值必须从一个工厂函数返回。
required:定义参数是否必传,值的数据类型为Boolean
validator:自定义验证函数用于对传入的参数添加个性化的限制,值的数据类型为Function,函数的参数为对应传入的参数值。