1.父传子props
在父元素定义自定义属性然后将值传过去,子组件通过props接收
2.子传父$emit
子组件通过定义$emit()写一个自定义事件,需要传参也可以往里写。他是触发当前组件标签上的一个自定义事件
父组件在子组件标签上定义子组件触发的自定义事件。如果在组件上直接写逻辑,加了括号那么就得通过$event接收。并且组件加了括号,子组件如果传多个参数,那么就得写成一个对象。如果写成一个函数,第一个形参就是传过来的参数。多个的话可以定义多个形参接收
3.vuex:详情见vuex
4.v-model
会被解析成:value=“要传递的属性”和@input=“value = $event”事件,子组件接收得通过在poprs中定义value属性来接收。然后在改变时要通过$emit自定义一个叫input的事件。然后把参数传递过去,父组件就会用$event接收参数并赋值给value
5.this.$parent和this.$children
6.中央事件总线机制($bus)
7.$refs
在子组件上定义ref='自定义属性名',父组件在需要获取的地方通过$refs.自定义属性名。就可以查看并使用子元素的属性和方法
8.provider 和inject
使用方式:在父组件中通过provider来提供变量,然后在子组件中通过inject来注入变量。只要父组件提供了变量,在父组件有效的生命周期内,所有的子孙组件都可以通过inject来注入父组件中的值 ?? ?父组件: provide: { ? ? ? for: "demo" ? ? }, ?? ?子组件:inject: ['for']
9.路由传参
(1)params ?? ?在声明式导航中可以通过/+参数拼接在url后面,然后路由规则要在url后面加/:参数名。在编程式导航中可以用$router.push()方法中写一个对象,不过注意params不能和path同时用,要在路由规则上写一个name属性 ?? ?使用:$route.params.参数名
(2)query ?? ?在声明式导航中可以通过?+参数拼接在url后面,然后路由规则要在url后面加/:参数名。在编程式导航中可以用$router.push()方法中写一个对象,然后用键是query,值是对象 ?? ?使用:$route.query.参数名
(3)区别: ?? ?1.使用方式上一个通过params,一个通过query ?? ?2.params传过去的参数不会出现在地址栏,相对安全,而query会把参数拼接到地址栏上。不安全 ?? ?3.编程式导航里用query配合path跳转,params要配合name跳转
|