前言
props 和 $emit
// 父组件(Parent.vue)
<template>
<div id="parent">
<Child :msg="msg" />
</div>
</template>
<script>
import Child from './Child'
export default {
name: 'parent',
data() {
return {
msg: '这是来自父组件来的数据~~'
}
},
components: {
Child
}
}
</script>
// 子组件(Child.vue)
<template>
<div id="child">
<div>{{ msg }}</div>
</div>
</template>
<script>
export default {
name: 'child',
data() {
return {
}
},
props: {
msg: {
type: String
}
},
methods: {
}
}
</script>
// 父组件
<template>
<div id="parent">
<div>{{ msg }}</div>
<Child2 @changeMsg="parentMsg" />
</div>
</template>
<script>
import Child2 from './Child2'
export default {
name: 'parent',
data() {
return {
msg: ''
}
},
methods: {
parentMsg( msg ) {
this.msg = msg;
}
},
components: {
Child2
}
}
</script>
// 子组件
<template>
<div id="child">
<button @click="childMsg">传递数据给父组件</button>
</div>
</template>
<script>
export default {
name: 'child',
data() {
return {
}
},
methods: {
childMsg() {
this.$emit( 'changeMsg', '传递数据给粑粑组件' );
}
}
}
</script>
总结:开发组件常用的数据传输方式,父子间传递。
$emit 和 $on
// 父组件
<template>
<div id="parent">
<Child1 :Event="Event" />
<Child2 :Event="Event" />
<Child3 :Event="Event" />
</div>
</template>
<script>
import Vue from 'Vue';
import Child1 from './Child1';
import Child2 from './Child2';
import Child3 from './Child3';
// 公共的实例
const Event = new Vue();
export default {
name: 'parent',
data() {
return {
Event
}
},
components: {
Child1,
Child2,
Child3
}
}
</script>
// 子组件1
<template>
<div id="child1">
1、她的名字叫:{{ name }}
<button @click="send">传递数据给Child3</button>
</div>
</template>
<script>
export default {
name: 'child1',
data() {
return {
name: '柯基慧'
}
},
props: {
Event: Object
},
methods: {
send() {
this.Event.$emit( 'msgA', this.name );
}
}
}
</script>
// 子组件2
<template>
<div id="child2">
1、她的身高:{{ height }}
<button @click="send">传递数据给Child3</button>
</div>
</template>
<script>
export default {
name: 'child2',
data() {
return {
height: '149.9cm'
}
},
props: {
Event: Object
},
methods: {
send() {
this.Event.$emit( 'msgB', this.height );
}
}
}
</script>
// 子组件3
<template>
<div id="child3">
<h3>她的名字叫:{{ name }},身高{{ height }}。</h3>
</div>
</template>
<script>
export default {
name: 'child3',
data() {
return {
name: '',
height: ''
}
},
props: {
Event: Object
},
mounted() {
this.Event.$on( 'msgA', name => {
this.name = name;
} );
this.Event.$on( 'msgB', height => {
this.height = height;
} );
}
}
</script>
总结:在父子、兄弟、隔代组件中都可以互相数据通信,重要的是 $emit 和 $on 事件必须是在一个公共的实例上才能触发。
$attrs 和 $listeners
Vue 组件间传输数据在 Vue2.4 版本后增加了新方法 $attrs 和 $listeners 。
1)$attrs
props:['type', 'placeholder', 'title', ...]
// 父组件
<template>
<div id="parentAttrs">
<MyInput placeholder="请输入你的姓名" type="text" title="姓名" v-model="name" />
</div>
</template>
<script>
import MyInput from './MyInput';
export default {
name: 'parent',
data() {
return {
name: ''
}
},
components: {
MyInput
}
}
</script>
// 子组件
<template>
<div>
<label>姓名:</label>
<input v-bind="$attrsAll" @input="$emit( 'input', $event.target.value )" />
</div>
</template>
<script>
export default {
name: 'myinput',
data() {
return {}
},
inheritAttrs: false,
computed: {
$attrsAll() {
return {
value: this.$vnode.data.model.value,
...this.$attrs
}
}
}
}
</script>
2)$listener
<template>
<div id="parentListener">
<MyInput @focus="focus" placeholder="请输入你的姓名" type="text" title="姓名" v-model="name" />
</div>
</template>
<script>
import MyInput from './MyInput';
export default {
name: 'parent',
data() {
return {
name: ''
}
},
methods: {
focus() {
console.log( 'test' );
}
},
components: {
MyInput
}
}
</script>
必须要让 focus 事件作用于 MyInput 组件的 input 元素上。
<template>
<div>
<label>姓名:</label>
<input v-bind="$attrsAll" v-on="$listenserAll" />
<button @click="handlerF">操作test</button>
</div>
</template>
<script>
export default {
name: 'myinput',
data() {
return {}
},
inheritAttrs: false,
props: ['value'],
methods: {
handlerF() {
this.$emit( 'focus' );
}
},
computed:{
$attrsAll() {
return {
value: this.value,
...this.$attrs
}
},
$listenserAll() {
return Object.assign(
{},
this.$listeners,
{input: event => this.$emit( 'input', event.target.value )})
}
}
}
</script>
总结:用在父组件传递数据给子组件或者孙组件。
provide 和 inject
// 父组件
<template>
<div class="parentProvide">
<button @click="changeSth">我要干嘛好呢~</button>
<p>要干嘛:{{ sth }}</p>
<ChildA />
</div>
</template>
<script>
import ChildA from './ChildA';
export default {
name: 'parent-pro',
data() {
return {
sth: '吃饭~'
}
},
// 在父组件传入变量
provide() {
return {
obj: this
}
},
methods: {
changeSth() {
this.sth = '睡觉~';
}
},
components: {
ChildA
}
}
</script>
// 子组件A
<template>
<div>
<div class="childA">
<p>子组件A该干嘛呢:{{ this.obj.sth }}</p>
</div>
<ChildB />
</div>
</template>
<script>
import ChildB from "./ChildB";
export default {
name: "child-a",
data() {
return {};
},
props: {},
// 在子组件拿到变量
inject: {
obj: {
default: () => {
return {}
}
}
},
components: {
ChildB
}
}
</script>
// 子组件B
<template>
<div>
<div class="childB">
<p>子组件B该干嘛呢:{{ this.obj.sth }}</p>
</div>
</div>
</template>
<script>
export default {
name: "child-b",
data() {
return {};
},
props: {},
// 在子组件拿到变量
inject: {
obj: {
default: () => {
return {}
}
}
}
}
</script
总结:传输数据父级一次注入,子孙组件一起共享的方式。
$parent 和 $children & $refs
// 父组件
<template>
<div class="parentPC">
<p>我的名字:{{ name }}</p>
<p>我的标题:{{ title }}</p>
<ChildA ref="comp1" />
<ChildB ref="comp2" />
</div>
</template>
<script>
import ChildA from "./ChildA.vue";
import ChildB from "./ChildB.vue";
export default {
name: 'parent-pc',
data() {
return {
name: '',
title: '',
contentToA: 'parent-pc-to-A',
contentToB: 'parent-pc-to-B'
}
},
mounted() {
const comp1 = this.$refs.comp1;
this.title = comp1.title;
comp1.sayHi();
this.name = this.$children[1].title;
},
components: {
ChildA,
ChildB
}
}
</script>
// 子组件A - ref方式
<template>
<div>
<p>(ChildA)我的父组件是谁:{{ content }}</p>
</div>
</template>
<script>
export default {
name: 'child-a',
data() {
return {
title: '我是子组件child-a',
content: ''
}
},
methods: {
sayHi() {
console.log( 'Hi, girl~' );
}
},
mounted() {
this.content = this.$parent.contentToA;
}
}
</script>
// 子组件B - children方式
<template>
<div>
<p>(ChildB)我的父组件是谁:{{ content }}</p>
</div>
</template>
<script>
export default {
name: 'child-b',
data() {
return {
title: '我是子组件child-b',
content: ''
}
},
mounted() {
this.content = this.$parent.contentToB;
}
}
</script>
总结:父子组件间共享数据以及方法的便捷实践之一。
Vuex
1、State (index.js)
Vue.use(Vuex);
const state = {
userInfo: {}, // 用户信息
};
export default new Vuex.Store({
state,
getters,
mutations,
actions
});
2、Getters
export default {
/**
@description 获取用户信息
*/
getUserInfo( states ) {
return states.userInfo;
}
}
3、Mutation
Mutation 用来改变状态。需要注意的是,Mutation 里的修改状态的操作必须是同步的。在根实例中注册了 store 后, 可以用 this.$store.commit('xxx', data) 来通知 Mutation 来改状态。
export const UPDATE_USERINFO = "UPDATE_USERINFO";
export default {
[type.UPDATE_USERINFO]( states, obj ) {
states.userInfo = obj;
}
}
4、Action
Action 提交的是 Mutation,而不是直接变更状态。
Action 可以包含任意异步操作。
在根实例中注册了 store 后, 可以用 this.$store.dispatch('xxx', data) 来存触发 Action。
export default {
update_userinfo({
commit
}, param) {
commit( "UPDATE_USERINFO", param );
}
}
actions: {
incrementAsync ({ commit }) {
setTimeout(() => {
commit('increment')
}, 1000)
}
}
总结:对 Vue 应用中多个组件的共享状态进行集中式的管理(读/写),统一的维护了一份共同的 State 数据,方便组件间共同调用。
slot-scope 和 v-slot
<template>
<div class="container">
<header>
<slot name="header"></slot>
</header>
<main>
<slot></slot>
</main>
<footer>
<slot name="footer"></slot>
</footer>
</div>
</template>
<script>
export default {
name: "base-layout",
data() {
return {}
}
}
</script>
// 父组件
<template>
<base-layout>
<template v-slot:header>
<h1>Here might be a page title</h1>
</template>
<p>A paragraph for the main content.</p>
<p>And another one.</p>
<template v-slot:footer>
<p>Here's some contact info</p>
</template>
</base-layout>
</template>
<script>
import BaseLayout from "./BaseLayout";
export default {
name: "parent-slot",
data() {
return {
}
},
components: {
BaseLayout
}
}
</script>
插槽的名字现在通过 v-slot:slotName 这种形式来使用,没有名字的 <slot> 隐含有一个 "default" 名称:
<template v-slot:default>
<p>A paragraph for the main content.</p>
<p>And another one.</p>
</template>
scopedSlots 属性
scopedSlots 是编程式语法,在 render() 函数中使用 scopedSlots。
// baseLayout.vue
<script>
export default {
data() {
return {
headerText: "child header text",
defaultText: "child default text",
footerText: "child footer text"
}
},
render( h ) {
return h("div", { class: "child-node" }, [
this.$scopedSlots.header({ text: this.headerText }),
this.$scopedSlots.default(this.defaultText),
this.$scopedSlots.footer({ text: this.footerText })
]);
}
}
</script>
<script>
import BaseLayout from "./baseLayout";
export default {
name: "ScopedSlots",
components: {
BaseLayout
},
render(h) {
return h("div", { class: "parent-node" }, [
this.$slots.default,
h("base-layout", {
scopedSlots: {
header: props => {
return h("p", { style: { color: "red" } }, [
props.text
]);
},
default: props => {
return h("p", { style: { color: "deeppink" } }, [
props
]);
},
footer: props => {
return h("p", { style: { color: "orange" } }, [
props.text
]);
}
}
})
]);
}
}
</script>
总结
微信扫一扫
关注该公众号