一、父组件调用子组件的数据或方法
1、$children(不推荐)
this.$children.handleSearchClick(); // 方法
this.$children.userName; // 属性
2、ref
// 父组件通过ref给子组件做一个标记
<Child ref="childRef"/>
this.$refs.childRef.handleSearchClick(); // 方法
this.$refs.childRef.userName; // 属性
3、组件v-model
// 父组件
<my-component v-model="message"></my-component> // message: 'hello' 当子组件输入框值改变时,`message` 的值也会随之更新。
// 子组件
<input :value="value" @input="$emit('input', $event.target.value)" />
props: {
value: String
},
// 默认情况下,一个组件上的 v-model 会把 value 用作 prop 且把 input 用作 event
model: {
prop: 'value',
event: 'input'
}
// 但是对于一些输入类型(如单选框或复选框),我们可能需要自定义这些绑定,以便更好地控制组件的行为。
// 举个例子,假设我们有一个自定义的开关组件,希望在使用 `v-model` 时绑定 `checked` prop 和 `change` 事件,而不是默认的 `value` prop 和 `input` 事件。这时候,可以在组件定义中添加 `model` 选项来实现:
Vue.component('my-switch', {
props: {
checked: {
type: Boolean,
default: false
}
},
model: {
prop: 'checked',
event: 'change'
},
template: `
<label>
<input type="checkbox" :checked="checked" @change="$emit('change', $event.target.checked)">
<span class="slider"></span>
</label>
`
})
// 父组件
<my-switch v-model="isOn"></my-switch> // isOn: true 当开关状态改变时,`isOn` 的值也会随之更新。
二、子组件访问父组件的数据或方法
1、props 可以是数组或对象,接收来自父组件的数据。(只读 read only)
// 父组件
// 可以传字符串、数组、对象、布尔值、函数
<details title="text" />
// 传入一个对象的所有property:
<InquiryDetails v-bind="obj" />
// 等价于:
<InquiryDetails
v-bind:id="obj.id"
v-bind:title="obj.name"
/>
// 子组件
props: { hasId : Boolean }
2、$parent能够访问父组件的属性和方法(同children)
3、
e
m
i
t
(
emit(
emit(emit() 是 Vue.js 的实例方法之一,可以在一个子组件中触发一个自定义事件,并向外部传递数据,外部可以使用 v-on
或 @
添加监听事件。)
// 当子组件中使用 `$emit()` 触发自定义事件时,对应的父组件中的处理函数就会自动被调用,同时 `$emit()` 方法还可以将数据传递到父组件中
this.$emit("handleClick", v);
// 在父组件中,可以通过使用 `v-on` 或 `@` 添加监听子组件触发的自定义事件。监听时需要指定相应的事件名称,例如 `@customEvent`,并将对应的事件处理函数传递给该自定义事件。
<outSide @handleClick="handleSearchClick"/>
methods() {
handleSearchClick(v) {
// do something
}
}
4、provide / inject
// 父组件
// provide(provide是父级组件需要传递给子孙组件的属性/方法。选项有以下几种:)
// 一个对象。
// 返回一个对象的函数。
// 选项一
provide: {
content: 'hello world'
}
// 选项二
provide(){
return {
content: 'hello world'
}
}
// 子组件
// inject(inject是子孙组件用来接收父级组件属性/方法。选项有以下几种:)
// 一个字符串数组。
// 一个对象,对象的key是本地的绑定名,value是provide定义的名字。
// 一个对象,区分上一种方式是为了设置默认值。对象的key是本地的绑定名,value也是一个对象。该对象有两个键,from(provide定义的名字),default(默认值)。
// 选项一
inject: ['content']
// 选项二
inject: {
content: 'content'
}
// 选项三
inject: {
content: {
from:'content',
default:'hello world'
}
}
三、路由传参(params 和 query)
区别:
1.params只能用name来引入路由,query用path/name来引入。
// params
this.$router.push({
name: 'home',
params: {
id: this.id
}
})
// query
this.$router.push({
path:'./login', // name: 'home',
query: {
id: this.id
}
})
2.params类似于post,query更加类似于我们ajax中get传参,说的再简单一点,前者在浏览器地址栏中不显示参数,后者显示,所以params传值相对安全一些。
3.取值用法类似分别是:
this.$route.params.id 和 this.$route.query.id
4.params传值一刷新就没了,query传值刷新还存在。
四、bus方式
1、创建一个公共的bus.js文件
import Vue from "vue"
export default new Vue();
2、在需要组件通信的组件中都引入该文件
<template>
<div>
<div>我是通信组件A</div>
<el-button @click="changeName">修改姓名</el-button>
</div>
</template
<script>
import EventBus from "../bus.js" // 局部引用(注意路径是否正确)
// 全局引用 main.js
// import bus from '../bus'
// Vue.prototype.$bus = bus;
export default{
data(){
return{}
},
methods:{
changeName(){
EventBus.$emit("editName", '点点关注!')
}
}
}
</script>
3、另外一个组件中同样引入bus.js文件,通过$on监听事件回调
<template>
<div>我是通信组件B</div>
</template
<script>
import EventBus from "../bus.js"
export default{
data(){
return{}
},
mounted:{
// 监听当前实例上的自定义事件。事件可以由 vm.$emit 触发。回调函数会接收所有传入事件触发函数的额外参数。
EventBus.$on('editName',(name)=>{
console.log(name) // => 点点关注!
})
}
}
</script>
五、Vuex 官方文档
六、localStorage和sessionStorage
都是通过setItem(“key”,“value”)设置值。
注意: 这里key和value都是string类型的。如果想要存储json格式,JSON.stringify(data)。
用法类似分别是:
localStorage.setItem("historicalVersion", data); // 存
localStorage.getItem("historicalVersion"); // 取
区别:
1、localStorage(本地存储): 永久性存储,关闭页面或浏览器localStorage中的数据也不会消失,除非手动删除。
// 可以在实例销毁前手动删除
beforeDestroy() {
localStorage.removeItem("historicalVersion");
}
2、sessionStorage(会话存储):关闭窗口或标签页之后将会删除sessionStorage中的数据。