一 子传父(对$emit的理解)
作用
子组件可以使用 $emit 触发父组件的自定义事件。
语法
vm.$emit( event, arg ) //触发父级实例上的事件
对于vue.js中的this.emit的理解：
举例 : this.emit(‘increment1’,”加参数”)；
其实它的作用就是触发自定义函数。此外,可以子组件传参数给父组件
综述,即子组件调用父组件的方法并传递数据
具体应用如下
子组件
<template>
<button @click="emitEvent">点击我</button>
</template>
<script>
export default {
data() {
return {
msg: "我是子组件中的数据"
}
},
methods: {
emitEvent(){
this.$emit('my-event', this.msg)
//通过按钮的点击事件触发方法，然后用$emit触发一个my-event的自定义方法，传递this.msg数据。
}
}
}
</script>
父组件
<template>
<div id="app">
<child-a @my-event="getMyEvent"></child-a>
<!--父组件中通过监测my-event事件执行一个方法，然后取到子组件中传递过来的值-->
</div>
</template>
<script>
import ChildA from './components/child.vue'
export default {
components: {
ChildA
},
methods: {
getMyEvent(msg){ // msg是个形参value,实质是接收的子组件传来数据的参数
console.log('接收的数据--------->'+msg)//接收的数据--------->我是子组件中的数据
}
}
}
</script>
二 父传子
父组件可以使用 props 把数据传给子组件。
子组件通过props拿到父组件传来的数据。
父组件
<template>
<div id="app">
<div class="transac-del">
<div>
<span class="sub_title">交易详情</span>
</div>
<p>
// v-if的原因是调接口回来数据是个异步操作,因此给个条件判断,数据不为null的时候才传数据给子组件,以免数据一开始拿到的是空对象
<transacDet v-if="deiMap" :DeiMap = 'deiMap' /> // 子组件,并且在数据模型中定义deiMap:null
</p>
</div>
</div>
</template>
子组件
props: {
DeiMap:{
type:Object,
required: true
}
},
mounted () {
// 子组件通过props拿到父组件传来的数据,是个对象,直接this.DeiMap可以使用数据
console.log('obj==',this.DeiMap)
},
prop的单向数据流
vue官方:
所有的 prop 都使得其父子 prop 之间形成了一个单向下行绑定：父级 prop 的更新会向下流动到子组件中，但是反过来则不行。这样会防止从子组件意外变更父级组件的状态，从而导致你的应用的数据流向难以理解。
额外的，每次父级组件发生变更时，子组件中所有的 prop 都将会刷新为最新的值。这意味着你不应该在一个子组件内部改变 prop。如果你这样做了，Vue 会在浏览器的控制台中发出警告。
如下
image.png
可以这样理解
父传子 prop是单向数据流
如果在子组件中已经接受了值,这时在子组件内直接再次改变这个值,会出现问题,vue不允许这样操作,vue规定了props是单向数据流传值
解决方法
在data中定义一个第三方的变量接收数据(即克隆数据),这个第三方变量即可更改
同时,在mounted阶段赋值给这个变量
三 $refs的使用
$refs作用1 => 在DOM元素上使用$refs可以迅速进行dom定位
$refs作用2 => 在组件上使用ref属性，可以通过$refs实现对子组件操作
即$refs是父组件调用子组件的方法，可以传递数据
首先给子组件做标记。demo ：<firstchild ref="one"></firstchild>
然后在父组件中，通过this.$refs.one就可以访问了这个自组件了，包括访问自组件的data里面的数据，调用它的函数
注意1
ref 被用来给元素或子组件注册引用信息。引用信息将会注册在父组件的 $refs 对象上。如果在普通的 DOM 元素上使用，引用指向的就是 DOM 元素; 如果用在子组件上，引用就指向组件实例
当 v-for 用于元素或组件的时候，引用信息将是包含 DOM 节点或组件实例的数组
注意2
$refs不能在created生命周期中使用 因为在组件创建时候 该ref还没有绑定元素
它是非响应的，所以应该避免在模板或计算属性中使用 $refs ,它仅仅是一个直接操作子组件的应急方案
当使用v-for的元素或组件，引用信息$refs将是包含DOM节点的或组件实例的数组，类似$children的使用
父组件
<template>
<div id="app">
<child-a ref="child"></child-a>
<!--用ref给子组件起个名字-->
<button @click="getMyEvent">点击父组件</button>
</div>
</template>
<script>
import ChildA from './components/child.vue'
export default {
components: {
ChildA
},
data() {
return {
msg: "我是父组件中的数据"
}
},
methods: {
getMyEvent(){
this.$refs.child.emitEvent(this.msg);
//调用子组件的方法，child是上边ref起的名字，emitEvent是子组件的方法。
}
}
}
</script>
子组件
<template>
<button>点击我</button>
</template>
<script>
export default {
methods: {
emitEvent(msg){
console.log('接收的数据--------->'+msg)//接收的数据--------->我是父组件中的数据
}
}
}
</script>
四 $on的使用
待补充
五 $parent
vue 里 this.$parent 作用
$parent在子组件中调用父组件的方法或获得其数据
this.$parent 可以访问到父组件上所有的 data(){ 里的数据信息和生命周期方法，methods里的方法 }
如 this.$parent.List = []; 表示访问到父组件中data的数据list数组
区分
1、ref为子组件指定一个索引名称，通过索引来操作子组件；
2、this.$parent 可以直接访问该组件的父实例或组件；
3、父组件也可以通过this.$children 访问它所有的子组件，
$parent和$children 可以递归向上或向下无线访问， 直到根实例或最内层的组件。
六 $children
他返回的是一个组件集合，如果你能清楚的知道子组件的顺序，你也可以使用下标来操作；
for(let i=0;i<this.$children.length;i++){
console.log(this.$children[i].children_data);
this.$children[i].children_fun();
}
七 
children的案例
父组件index.vue
<template>
<div>
<testVue ref="childVue"></testVue> <br/><br/>
<testVue2></testVue2> <br/><br/>
<button @click="clickChild1">点击访问子组件</button> <br/><br/>
<button @click="clickChild2">点击访问子组件2</button>
</div>
</template>
<script>
import testVue from './testVue'
import testVue2 from './testVue2'
export default {
data(){
return {
total: 0
}
},
methods: {
clickChild1(){
console.log(this.$refs.childVue.counter);
},
clickChild2(){
console.log(this.$children[1].testval);
}
},
components: {
testVue,
testVue2
}
}
</script>
子组件1
<template>
<div>
<button @click="parentClick">点击访问父组件</button>
</div>
</template>
<script>
export default {
data(){
return {
counter: 0
}
},
methods: {
parentClick(){
console.log(this.$parent.total);
}
}
}
</script>
子组件2
<template>
<div>
</div>
</template>
<script>
export default {
data(){
return {
testval: '2222'
}
}
}
</script>
