Vue父子组件之间的传递数据和方法调用
概述
在一个良好定义的接口中尽可能将父子组件解耦是很重要的，因此组件实例的作用域必须是独立的。这意味着不能 (也不应该) 在子组件的模板内直接引用父组件的数据，也不能在父组件的模板中直接使用子组件的数据，否则会增强组件之间的耦合性，使得组件不利于维护和管理。在 Vue 中，父子组件的关系可以总结为 props down, events up。父组件通过 props 向下传递数据给子组件，子组件通过 events 给父组件发送消息。
image
Vue组件选项props-父组件向子组件传递数据
1.静态props
子组件要显式地用 props 选项声明它期待获得的数据
const childNode = {
template: '<div>{{message}}</div>',
props:['message']//子组件要显式地用 props 选项声明它期待获得的数据
}
静态props通过为子组件在父组件中的 占位符添加特性的方式 来达到传值的目的
<div id="example">
<parent></parent>
</div>
<script>
const childNode = {
template: '<div>{{message}}</div>',
props:['message']
}
const parentNode = {
template: `
<div class="parent">
<child message="aaa"></child>
<child message="bbb"></child>
</div>`,
components: {
childNode
}
};
// 创建根实例
new Vue({
el: '#example',
components: {
parentNode
}
})
</script>
2.命名规定
对于props声明的属性来说，在父级HTML模板中，属性名一般需要使用中划线写法，子级props属性声明时，使用小驼峰或者中划线写法都可以；而子级HTML模板使用从父级传来的变量时，需要使用对应的小驼峰写法
const parentNode = {
template: `
<div class="parent">
<child my-message="aaa"></child>//父级HTML模板中，属性名一般使用中划线写法
<child my-message="bbb"></child>
</div>`,
components: {
childNode
}
};
const childNode = {
template: '<div>{{myMessage}}</div>',//子级HTML模板使用从父级传来的变量时，需要使用对应的小驼峰写法
props:['myMessage']//子级props属性声明时，使用小驼峰
//props:['my-message']//子级props属性声明时，中划线
}
3.动态props
在模板中，要动态地绑定父组件的数据（父组件data里面的变量）到子模板的 props，与绑定到任何普通的HTML特性相类似，就是用 v-bind（简写:）。每当父组件的数据变化时，该变化也会传导给子组件
const childNode = {
template: '<div>{{myMessage}}</div>',
props:['myMessage']
}
const parentNode = {
template: `
<div class="parent">
<child :my-message="data1"></child>
<child :my-message="data2"></child>
</div>`,
components: {
childNode
},
data(){
return {
'data1':'aaa',
'data2':'bbb'
}
}
};
思考：如何传递一个number类型的数字(1.:message='1',2:message='num' num:1,静态props默认传递的是字符串类型)
4.props验证
可以为组件的 props 指定验证规格。如果传入的数据不符合规格，Vue会发出警告。当组件给其他人使用时，这很有用，要指定验证规格，props需要用对象的形式，而不能用上述的字符串数组了。
Vue.component('example', {
props: {
// 基础类型检测 (`null` 意思是任何类型都可以)
propA: Number,
// 多种类型
propB: [String, Number],
// 必传且是字符串
propC: {
type: String,
required: true
},
// 数字，有默认值
propD: {
type: Number,
default: 100
},
// 数组/对象的默认值应当由一个工厂函数返回
propE: {
type: Object,
default: function () {
return { message: 'hello' }
}
},
// 自定义验证函数
propF: {
validator: function (value) {
return value > 10
}
}
}
})
type可验证：String、Number、Boolean、Function、Object、Array、Symbol
type 也可以是一个自定义构造器函数，使用 instanceof 检测
propSomeProperty:{
type(value){
return value instanceof Person
}
}
当 prop 验证失败，Vue 会在抛出警告 (如果使用的是开发版本)。props会在组件实例创建之前进行校验，所以在函数验证里，组件还没创建，诸如 data、computed 或 methods 等实例属性还无法使用。
5.单向数据流
prop 是单向绑定的：当父组件的属性变化时，将传导给子组件，但是不会反过来。这是为了防止子组件无意修改了父组件的状态——这会让应用的数据流难以理解。另外，每次父组件更新时，子组件的所有 prop 都会更新为最新值。这意味着不应该在子组件内部改变 prop。如果这么做了，Vue 会在控制台给出警告。
<div id="example">
<parent></parent>
</div>
<script>
var childNode = {
template: `
<div class="child">
<div>
<span>子组件数据</span>
<input v-model="childMsg">
</div>
<p>{{childMsg}}</p>
</div>
`,
props:['childMsg']
}
var parentNode = {
template: `
<div class="parent">
<div>
<span>父组件数据</span>
<input v-model="msg">
</div>
<p>{{msg}}</p>
<child :child-msg="msg"></child>
</div>
`,
components: {
'child': childNode
},
data(){
return {
'msg':'match'
}
}
};
// 创建根实例
new Vue({
el: '#example',
components: {
'parent': parentNode
}
})
</script>
父组件数据变化时，传递给子组件的数据会相应变化；而子组件改变父组件传递的数据时，父组件数据不变，并在控制台显示警告
6.修改prop数据
修改prop中的数据，通常有以下两种原因
- prop 作为初始值传入后，子组件想把它当作局部数据来用
- prop 作为初始值传入，由子组件处理成其它数据输出
[注意]JS中对象和数组是引用类型，指向同一个内存空间，如果 prop 是一个对象或数组，在子组件内部改变它会影响父组件的状态.
对于这两种情况，正确的应对方式是
1、子组件定义一个局部变量，并用 prop 的值初始化它
props: ['initialCounter'],
data: function () {
return { counter: this.initialCounter }
}
示例代码：
<div id="example">
<parent></parent>
</div>
<script src="https://unpkg.com/vue"></script>
<script>
var childNode = {
template: `
<div class="child">
<div>
<span>子组件数据</span>
<input v-model="temp">
</div>
<p>{{temp}}</p>
</div>
`,
props:['childMsg'],
data(){
return{
temp:this.childMsg
}
},
};
var parentNode = {
template: `
<div class="parent">
<div>
<span>父组件数据</span>
<input v-model="msg">
</div>
<p>{{msg}}</p>
<child :child-msg="msg"></child>
</div>
`,
components: {
'child': childNode
},
data(){
return {
'msg':'match'
}
}
};
// 创建根实例
new Vue({
el: '#example',
components: {
'parent': parentNode
}
})
</script>
缺点：父组件数据发生变化是，子组件无法实时更新到
2、定义一个计算属性，处理 prop 的值并返回
props: ['size'],
computed: {
normalizedSize: function () {
return this.size；
}
}
但是，由于是计算属性，则只能显示值，设置值相对麻烦，也可以做到(set,get)
props: ['size'],
computed: {
normalizedSize:{
get(){
return this.size；
},
set(value){
this.size = value
}
}
}
3.利用watch监听
<div id="example">
<parent></parent>
</div>
<script src="https://unpkg.com/vue"></script>
<script>
var childNode = {
template: `
<div class="child">
<div>
<span>子组件数据</span>
<input v-model="temp">
</div>
<p>{{temp}}</p>
</div>
`,
props:['childMsg'],
data(){
return{
temp:this.childMsg
}
},
watch:{
childMsg(){
this.temp = this.childMsg
}
}
};
var parentNode = {
template: `
<div class="parent">
<div>
<span>父组件数据</span>
<input v-model="msg">
</div>
<p>{{msg}}</p>
<child :child-msg="msg"></child>
</div>
`,
components: {
'child': childNode
},
data(){
return {
'msg':'match'
}
}
};
// 创建根实例
new Vue({
el: '#example',
components: {
'parent': parentNode
}
})
</script>
子组件调用父组件的方法
1.直接在子组件中通过this.$parent.event来调用父组件的方法
父组件
<template>
<div>
<child></child>
</div>
</template>
<script>
import child from '@/components/dam/child';
export default {
components: {
child
},
methods: {
//父组件方法
fatherMethod() {
console.log('测试');
}
}
};
</script>
子组件
<template>
<div>
<button @click="childMethod">点击可调用父组件方法</button>
</div>
</template>
<script>
export default {
methods: {
childMethod() {
this.$parent.fatherMethod();
}
}
};
</script>
2.在子组件里用$emit向父组件触发一个事件，父组件监听这个事件就行了(常用)
父组件
<template>
<div>
<!-- fatherMethod:出发父组件方法的命名规定 --!>
<child @fatherMethod="fatherMethod"></child>
</div>
</template>
<script>
import child from '~/components/dam/child';
export default {
components: {
child
},
methods: {
fatherMethod(params) {
//params：父组件接受子组件传来的参数
console.log(params);
}
}
};
</script>
子组件
<template>
<div>
<button @click="childMethod">点击</button>
</div>
</template>
<script>
export default {
methods: {
childMethod() {
//params：子组件传递给父组件的参数
//fatherMethod：子组件触发父组件方法的命名规定
this.$emit('fatherMethod',params);
}
}
};
</script>
注意：这种方法也是子组件传递数据给父组件的方式
3.父组件把方法传入子组件中，在子组件里直接调用这个方法（利用子组件的props属性）
//子组件
const Child = {
props:{
parentMethod:{
type:Function,
default:null
}
},
template:`
<div>
<button @click="parentMethod">调用父组件方法</button>
</div>
`,
mounted(){
console.log(this.parentMethod);
}
};
//父组件
const Parent = {
components:{
Child
},
template:`
<div>
<child :parentMethod="alertSomeData"></child>
</div>
`,
methods:{
alertSomeData(){
alert('我是父组件方法');
}
}
};
new Vue({
el:'#app',
components:{
Parent
},
template:'<Parent />'
})
子组件传递数据给父组件
子组件相关逻辑触发式，利用this.$emit('触发父组件方法的标价',传递给父组件的数据)
//子组件
const Child = {
template:`
<div>
<button @click="emitChildData">传递子组件数据给父组件</button>
</div>
`,
data(){
return{
childMsg:'我是子组件数据'
}
},
methods:{
//子组件传递数据给父组件
emitChildData(){
this.$emit('emitDataToParent',this.childMsg);
}
}
};
//父组件
const Parent = {
components:{
Child
},
template:`
<div>
<child @emitDataToParent="getDataFromChild"></child>
<span v-text="getFromChild"></span>
</div>
`,
data(){
return{
getFromChild:''
}
},
methods:{
getDataFromChild(getData){
console.log(getData);
this.getFromChild = getData;
}
}
};
//入口组件
const App ={
components:{
Parent
},
template: `
<div>
<parent></parent>
</div>
`
};
//根组件
new Vue({
el:document.getElementById('app'),
components:{
App,
},
template:'<App />'
})
父组件调用子组件方法
子组件html用ref属性标记，父组件利用this.$refs.xxx.childMethods
//子组件
const Child = {
template:`
<div>
我是子组件
</div>
`,
methods:{
//子组件方法
childMethod(){
alert('我是子组件方法');
}
}
};
//父组件
const Parent = {
components:{
Child
},
template:`
<div>
<child ref="getChildMethods"></child>
<button @click="emitChildMethod">父组件调用子组件方法</button>
</div>
`,
methods:{
emitChildMethod(){
//父组件调用子组件方法
this.$refs.getChildMethods.childMethod();
}
}
};
//入口组件
const App ={
components:{
Parent
},
template: `
<div>
<parent></parent>
</div>
`
};
//根组件
new Vue({
el:document.getElementById('app'),
components:{
App,
},
template:'<App />'
})