(一) popsDowm
三种方法获取父组件数据：被动获得(1)；主动获取(2)。
1.被动获得：
父组件：v-bind: 绑定变量参数和方法参数；子组件：props 接收参数。可以在模板中直接使用也可以 this.参数 获得
|
v-bind:name="yourName"
|
props:['name'] | template: {{name}} js: this.name |
|
v-bind:fatherMeth="regMeth"
|
props:{fatherMeth: Function} | js: this.fatherMeth() |
2.主动获取：
①this.$parent.变量和方法
this.$parent.yourName;this.$parent.fatherTest().
如果获取不到，在父组件将 this 传递给子组件：:father="this"
this.father.youerName;this.father.fatherTest().
② 发送 emit 事件
this.$emit('fatherOnEmite',this.childVariate)
(二) eventUp:
两种方法: 在父组件设置 ref 属性；监听 emit (订阅)。
父组件：ref="child1"
this.$refs.child1.desc;this.$refs.child1.childTest()
父组件：v-on:fatherOnEmite="onEmite"
注意：由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。updated 不能保证全部组件都加载用 this.nextTick
代码github：https://github.com/dopocheng/alone-part
父组件
<template>
<div>
propsParent!!!<br /><br />
<!-- prop 静态赋值 -->
<!-- prop 变量动态赋值 yourName、obj-->
<Compon
title="my journey with vue"
v-bind:name="yourName"
v-bind:student="obj"
v-bind:fatherMeth="regMeth"
:father="this"
v-on:fatherOnEmite="onEmite"
ref="child1"
/><br />
<p @click="updated_data_counter">{{updated_data}} 点击 使用 this.$refs 获取子组件数据</p>
</div>
</template>
<script>
import Compon from '../../complex-component/components'
export default {
components: { Compon },
data() {
return {
yourName: "dpc",
obj: {
id: "007AB",
age: 18
},
updated_data: 0
}
},
created() {
},
updated() {// 由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。updated 不能保证全部组件都加载用 this.nextTick
this.fatherCall()
},
methods: {
fatherTest() {
console.log("父组件方法")
},
fatherCall() {
// 因为 ref 本身是作为渲染结果被创建的，在初始渲染的时候你不能访问它们 - 它们还不存在！$refs 也不是响应式的，因此你不应该试图用它在模板中做数据绑定
// 1.等待页面渲染完成后再去获取子组件变量和方法
console.log("***********父组件主动获取***********")
this.$nextTick(() => {console.log("this.$nextTick 最后调用",this.$refs.child1.desc)})
this.$nextTick(() => {console.log("this.$nextTick 最后调用"); this.$refs.child1.childTest()})// console.log 无法打印方法
console.log("***********父组件主动获取 end***********")
},
onEmite(arg) {
// 2. 获取子组件数据
console.log("父组件注册(订阅) v-on 方法", arg);
},
regMeth() {
console.log("父组件方法直接传入组件");
},
updated_data_counter() {
this.updated_data++
}
}
}
</script>
子组件：
<template>
<div>
complex-component components!!!<br /><br />
<p>{{title}}</p>
<p>{{name}}</p>
<p>{{student}}</p>
</div>
</template>
<script>
export default {
// props: ['title', 'likes', 'isPublished', 'commentIds', 'author']
// 注意那些 prop 会在一个组件实例创建之前进行验证，所以实例的属性 (如 data、computed 等) 在 default 或 validator 函数中是不可用的。
props:{// 一: 被动获得父组件的参数 (v-bind 参数)
title: {type:String, default:"title", required: true},
name: {
type: String,
validator: function (value) {
// 这个值必须匹配下列字符串中的一个,否则控制台有警告
return ['dpc', 'warning', 'danger'].indexOf(value) !== -1
}
},
student: {type:Object,
default: function () {
return { message: 'not student' }
}},
fatherMeth: Function,
father: Object
},
data() {
return {
childVariate: "在子组件调用父组件的oo!!!" ,
desc: "父组件调用子组件属性!!!",
}
},
created() {
this.passiveGain()
this.activeAcquirement()
},
methods: {
childTest() {
console.log("父组件调用子组件方法!!!")
},
passiveGain() {
console.log("***********child passive gain***********")
//一:被动获得父组件值(通过 v-bind:参数)和方法
console.log(this.title);
this.fatherMeth()
console.log("***********child passive gain end***********")
},
activeAcquirement() {
console.log("***********child active acquirement***********")
// 二.主动获取父组件变量值或方法
console.log("主动获取父组件变量值或方法",this.$parent.yourName)
this.$parent.fatherTest()
// 1.如果获取不到，就把父组件对象 this 传递给子组件，在子组件接收下 this.father (定义的参数).变量
console.log("父组件对象 this 传递给子组件",this.father.yourName)
this.father.fatherTest()
// 2.子组件使用 $emit 触发父组件事件
this.$emit('fatherOnEmite',this.childVariate)
console.log("***********child active acquirement end***********")
}
}
}
</script>