vue前端面试题之vue组件传递参数

父子组件传递参数（props / $emit）

这个比较容易实现，我们只需要在组件上绑定自定义属性名就可以通过子组件中的props属性接受。看下面代码：
父组件代码parent.vue

	<template>
  <div class="parent">
    <button @click="btnClick">向子组件中发送data</button>
    <h1 >子组件给我传过来的参数--> {{childrenData}}</h1>
    <hr>
    <children :content="content" @parentFn="getData"/>
  </div>
</template>
<script>
import children from "@/views/children.vue"
export default {
  data(){
    return{
      content:"",
      childrenData:""
    }
  },
  components:{
    children
  },
  methods:{
    btnClick(){
      this.content = "hello children!"
    },
    getData(msg){
      this.childrenData = msg
    }
  }
}

children.vue

<template>
  <div class="children">
    <h2>我是孩子组件</h2>
    <div>父组件给我传过来的数据是{{ content }}</div>
    <button @click="childrenFn">给父组件打招呼</button>
  </div>
</template>
<script>
export default {
  props: {
    content: {
      type: String,
      require: true,
    },
  },
  data(){
    return {
      message:"hello parent"
    }
  },
  methods: {
    childrenFn() {
      this.$emit("parentFn",this.message)
    },
  },
};
</script>

父传子：在parent组件中注册一个组件，然后父亲通过按钮发送content内容。绑定属性content
即子组件上:属性名，然后子组件内通过props去接收父组件传来的content。然后直接拿去渲染就可。平时父子传值用的还是比较多的。但是子组件如果想修改值，可以将props的值交给data里面的数据去处理。不建议修改props属性本身的值。
子传父：在子组件中通过this.$emit(“事件委托名”,payload)发送数据。父组件需通过绑定事件委托名，实现其传递数据。在这里我踩了个坑，绑定事件委托时，一定要在子组件本身上绑定。要不然，是监听不到子组件发送的委托事件的。

兄弟之间传递参数（$emit / $on 即eventBus）

cpn1.vue

<template>
  <div>
    <h1>我是大哥</h1>
    <h1>二弟回我的话:{{message}}</h1>
    <button @click="cpn1Click">向二弟说  二弟，今天我们去哪玩啊</button>
  </div>
</template>
<script>
import Bus from "./bus.js"
export default {
  data(){
    return {
      message:""
    }
  },
  created(){
    Bus.$on("sendCpn1",(res)=>{
      this.message = res
    })
  },
  methods:{
    cpn1Click(){
      Bus.$emit("sendCpn2","二弟，今天我们去哪玩啊")
    }
  }
}
</script>

cpn2.vue

<template>
  <div>
    <h1>我是二弟</h1>
    <h1>大哥给我说的话:{{ message }}</h1>
    <button @click="chickBtn">回大哥的话说 大哥,今天我们去三亚吧</button>
  </div>
</template>
<script>
import Bus from "./bus.js";
export default {
  data() {
    return {
      message: "",
    };
  },
  created() {
    Bus.$on("sendCpn2", (msg) => {
      this.message = msg;
    });
  },
  methods: {
    chickBtn() {
      Bus.$emit("sendCpn1", "大哥,今天我们去三亚吧");
    },
  },
};
</script>

通过Bus将两个组件扭在一起，一个发送一个事件委托，一个去监听事件。知道这个Bus能够传递参数就可以。我反正不推荐用这个去写传递内容。因为自己在用的时候，觉得不是很好用。使用这个来回操作页面的话就会有很多监听。而且使用这种方式需要将Bus都导入到组件当中。当然，有人也会说可以直接挂在到Vue.propertotype上就可以实现全部的Bus。这个东西，一般有很多需要注意的地方。

操作dom传递参数（$parent / $root, $refs）

parent.vue

<template>
  <div class="parent">
    <h1 >parent(爷爷 root) 内容:爷爷,过年的时候给你个压岁包</h1>
    <cpn-1 ></cpn-1>
  </div>
</template>
<script>
import cpn1 from "@/views/cpn1.vue"
export default {
  data(){
    return{
      content:"爷爷,过年的时候给你个压岁包",
    }
  },
  components:{
    cpn1
  }
}
</script>

cpn1.vue

<template>
  <div>
    <h1 >我是父亲(parent) 内容:在学校要好好学习啊</h1>
    <button @click="seeChildrenStatus" >看看children的学习状态</button>
    <children />
  </div>
</template>
<script>
import children from "@/views/children.vue"
export default {
  data(){
    return {
      message:"在学校要好好学习啊"
    }
  },
  components:{
    children
  },
  methods:{
    seeChildrenStatus(){
      alert(this.$children[0].studyStatus)
    }
  }
}
</script>

children.vue

<template>
  <div class="children">
    <h2 ref ="act">我是children</h2>
    <button @click="btnClick">回复爷爷</button>
    <button @click="btnClick2">回复父亲</button>
    <button @click="btnClick3">  拿到自己的dom元素</button>
  </div>
</template>
<script>
export default {
  data(){
    return {
      message:"好的",
      studyStatus:"努力拼命的学习"
    }
  },
  methods: {
    btnClick() {
      console.log(this.$root);
    },
    btnClick2(){
      alert(this.$parent.message)
    },
    btnClick3(){
      alert(this.$refs.act.innerHTML);
    }
  },
};
</script>

这里面的$ root，$ parent都能够实现访问父组件的属性的方法，两者的区别在于，如果存在多级子组件，通过$parent访问得到的是它最近一级的父组件，通过 $root访问得到的是根组件。当我们用 $ children获取子组件时，这时候子组件是个数组。我们需要通过下标来进行相应的操作。

vuex状态管理

首先我们贴上官网 vuex官网

Vuex有五个核心概念
state、getter、mutations、actions、modules

1. state: vuex的基本数据，用来存储变量

state:{
	firstName:"junlebao",
	lastName:"mc"
}
// vue通过this.$store.state.firstName使用

2. geeter:及基本数据state派生的数据，相当于计算属性，具有返回值的方法

getter:{
	fullName:function(state){
		return state.firstName+state.lastName
	}
}
// vue通过this.$store.getters.fullName使用

3. mutaions:提交更新数据的方法,必须是同步的。每个mutation都有一个字符串的事件类型和一个回调函数

mutations:{
	setName:(state,name){
		state.name = name
	}
}
// vue通过this.$store.commit("setName",name)

4. action:Action提交mutation,不能绕过mutation直接去改变状态。action中可以包含异步操作。

  actions: {
    increment (context) {
      context.commit('increment')
    }
  }
// vue通过this.$store.dispatch("setName")

5. module: 模块化vuex,可以让每个模块都有自己的这五个属性。方便管理

异步：this. $ store.dispatch(“actions方法名”,value)
同步: this. $ store.commit(“mutations方法名”,value)