1. 外部js调用vue的方法等
将vue实例中的this
传入外部js文件(比如作为某方法的参数),即可访问传入实例的所有内容。调用该实例中子组件的方法,用$refs
。
2. 路由参数
传递:vm.$router.push({ name: '', params: { id: 1 } }); // 注意,用path属性,在目标路由中取不到参数值
获取:vm.$route.params.id;
3.@click
绑定类似于
<label>
<input
type="radio"
name="patient-radio"
:value="item.patientID"
v-model="follow.selected"
@click="selectPatient"
/> {{ item.realName }}
</label>
要绑定在input
上,不要绑在label
上,否则会出现事件冒泡。
4. vuex(状态管理)的使用
- 访问store,可以事先在router.js中将store注册到根实例中,然后可以在各个组件通过
this.$router
访问到。
const app = new Vue({
store,
router,
render: h => h(index)
}).$mount('#app')
某组件中打印store中的信息:
mounted() {
console.log(this.$store.state); // 打印结果: Object {__ob__: Observer}
}
- Vuex 允许我们在 store 中定义『getters』(可以认为是 store 的计算属性)。Getters 接受 state 作为其第一个参数;也可以接受其他 getters 作为第二个参数。
在模块化的状态管理中,模块可以这样export:
state.js
export const commonState = {
count: 0,
todos: [
{ id: 1, text: '第一', done: true },
{ id: 2, text: '第二', done: false },
{ id: 3, text: '第三', done: true }
]
}
getters.js:
export const commonGetters = {
doneTodos(state) {
return state.todos.filter(todo => todo.done)
},
doneTodosCount(state, getters) {
return getters.doneTodos.length
}
}
然后在index.js(store)中这样注册:
import Vue from 'vue'
import Vuex from 'vuex'
import * as actions from './actions'
import * as getters from './getters'
import * as state from './state'
Vue.use(Vuex)
export default new Vuex.Store({
state: state.commonState,
actions: state.commonActions,
getters: getters.commonGetters
})
在组件中,就可以通过this.$store
直接调用它们:
console.log(this.$store.getters.doneTodosCount); // 结果为:2
当然也可以使用mapGetters 辅助函数,将 store 中的 state/getters 映射到局部计算属性:
import { mapState } from 'vuex'
import { mapGetters } from 'vuex'
export default {
computed: {
...mapState({
// 当映射的计算属性的名称与 state 的子节点名称相同时,
// 我们也可以给 mapState 传一个字符串数组。
// mapState(['count'])
count: state => state.count,
// 为了能够使用this获取局部状态,必须使用常规函数
countPlusLocalState(state) {
return state.count + this.localCount
}
}),
...mapGetters([
'doneTodos',
'doneTodosCount'
]),
...mapGetters({
// 命名
doneCount: 'doneTodosCount'
})
},
mounted() {
// 通过vm.$store访问
console.log(this.$store.state.count) // 打印结果: 0
// 通过映射到当前实例计算属性访问
console.log(this.count); // 打印结果: 0
console.log(this.$store.getters.doneTodosCount) // 打印结果: 2
console.log(this.doneCount); // 打印结果: 2
}
}
- Mutations
更改 Vuex 的 store 中的状态的唯一方法是提交 mutation。 必须同步执行。回调函数 (handler)接受 state 作为第一个参数;store.commit
提交,你可以向 store.commit 传入额外的参数,即 mutation 的 载荷(payload),载荷应该是一个对象:store.commit('increment', { amount: 10 })
。
提交 mutation 的另一种方式是直接使用包含 type 属性的对象:
store.commit({
type: 'increment',
amount: 10
})
handler:
mutations: {
increment (state, payload) {
state.count += payload.amount
}
}
在组件中提交 Mutations:
methods: {
// 状态管理 conmmit
...mapMutations({
// 映射 this.add() 为 this.$store.commit('increment')
add: 'increment'
})
},
mounted() {
let obj = {};
obj.amount = 1;
// 调用
this.add(obj);
console.log(this.count); // 打印结果为1
}
- Actions
Action 类似于 mutation,不同在于:Action 提交的是 mutation,而不是直接变更状态;Action 可以包含任意异步操作,也就是说 action 内部可以执行异步操作。触发Actions:store.dispatch()
;Actions 支持同样的载荷方式和对象方式。
5. 关于watch
的使用
监听一个普通的变量简单,关于监听一个对象:
data() {
return {
modal: {
accept: []
}
}
},
watch: {
modal: {
handler(curVal, oldVal) {
if(curVal.accept.length <= 0)
this.modal.btnRDis = true;
else
this.modal.btnRDis = false;
},
deep:true
}
},