【vue】父组件传值，子组件接收

一、vue中，父组件传值，子组件接收

1、父组件传值 ：:参数名=参数值

2、子组件接收：props:["参数名"]

3、子组件使用该参数：参数名:this.参数名

 二、实战

1、场景：

父组件：项目详情页，子组件为：接口用例页，将父组件中的项目id（project_id）传给子组件中调用

2、实现思路：

• 父组件传值：:project_id="$route.query.project_id"
• 子组件接收：props:["project_id",]
• 子组件中使用该参数：project_id:this.project_id

三、源代码

• 父组件

<el-tabs v-model="tab_name">
    <el-tab-pane label="项目设置" name="first">
        <Project_set :project_id="$route.query.project_id"></Project_set>
    </el-tab-pane>
    <el-tab-pane label="接口用例" name="second">
        <Project_case :project_id="$route.query.project_id"></Project_case>
    </el-tab-pane>
</el-tabs>

• 子组件

<script>
export default {
    name: "Project_case",
    mounted() {
    axios.get('http://localhost:8000/get_apis/',{
        params:{
            project_id:this.project_id
            }}},
    props:["project_id",]
    }
</script>