vue父子组件间属性、函数的相互调用

1、父组件

• 引入子组件

<!-- 组件 -->
<myTest></myTest>
import myTest from "./components/myTest.vue"
components:{
    myTest
},
data(){
    return {
        parentTitle:'父组件属性',
        }
    }
},
methods:{
    parentFun(){
        console.log('父组件方法');
    }
}

2、子组件

<template>
    <div>myTest页面</div>
</template>
data(){
    return {
        name:'子组件属性'
    }
},
methods:{
    childFun(){
        console.log('子组件方法');
    }
}

3、父组件调用子组件属性与函数

• 给子组件添加个ref属性

<!-- 组件 -->
<myTest ref="testComponent"></myTest>

• 通过res来调用子组件属性与函数

console.log(this.$refs.testComponent.name);
this.$refs.testComponent.childFun();

4、子组件调用父组件属性与函数

• 子组件里设置props属性来接受父组件属性

props:["title"],

• 父组件里绑定属性

<!-- 组件 -->
<myTest ref="testComponent" :title="parentTitle"></myTest>

• 通过emit属性调用父组件函数

this.$emit('parentM');

• 或者通过$parent属性调用父组件函数

this.$parent.parentFun();

5、关于路由传参的区别

• params：/router1/:id ，/router1/123，/router1/789 ,这里的id叫做params
  query：/router1?id=123 ,/router1?id=456 ,这里的id叫做query。

• 1：query方式传参和接收参数：

• params方式传参和接收参数：

• 2：query对应path，params对应name，path的参数会显示再地址栏，而params的参数不会显示再地址栏