如何用vue实现组件间参数传递

这篇文章主要介绍“如何用Vue实现组件间参数传递”，在日常操作中，相信很多人在如何用vue实现组件间参数传递问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”如何用vue实现组件间参数传递”的疑惑有所帮助！接下来，请跟着小编一起来学习吧！

举例说明

例如：element-ui组件库中使用switch开关，有个属性active-color是设置“打开时”的背景色。change事件是触发状态的事件。

<el-switch v-model="value" :active-color="activecolor" @change="touchSwitch"></el-switch><script> export default {  data() {   return {    value: true,    activecolor: '#13ce66'   }  },  methods: {   touchSwitch () {    // 这里入方法   }  } };</script>

分析代码

我们分析上面的代码

首先我们可以看到active-color是将特定的数据传给组件，也就是父传子组件。

其次是@change虽然监听的是改变事件，但是语法糖依然是$emit，什么emit我们在以后的文章中会讲到，就是“抛出事件”。

这就分为组件的最基本功能：

•数据进
•事件出

那组件的使用我们知道了，通过active-color传入参数，通过@来接收事件。
 所以，我们来探究一下组件的内部结构是什么样的？

我写了一个小模型，是一个显示标题的小按钮，通过div包裹。

<!-- type-box.vue --><template> <div class="box" @click="ai_click(title)">{{title}}</div></template><script>export default { name: 'type-box', props: {  title: {   type: String,   default: () => ''  } }, methods: {  ai_click (title) {   this.$emit('ai_click', title)  } }}</script><style scoped> .box{  width: 250px;  height: 100px;  margin: 10px;  border-radius: 10px;  background-color: #3a8ee6;  color: white;  font-size: 25px;  line-height: 100px;  text-align: center;  cursor: pointer; }</style>

使用方法：

<!-- 父组件使用 --><template> <div>  <type-box title="演示盒子" @ai_click=“touch”></type-box> </div></template><script>import typeBox from './type-box'export default { components: {  typeBox }, methods: {  touch (data) {   console.log(data)  } }}</script>

分析组件

接收

通过props接收父组件传递过来的数据，通过工厂函数获取一个默认值。

传递

通过this.$emit('ai_click', title)告诉父组件，我要传递一个事件，名字叫“ai_click”,请通过@ai_click接收一下，并且我将title的值返回父组件。

vue是什么

Vue是一套用于构建用户界面的渐进式javascript框架，Vue与其它大型框架的区别是，使用Vue可以自底向上逐层应用，其核心库只关注视图层，方便与第三方库和项目整合，且使用Vue可以采用单文件组件和Vue生态系统支持的库开发复杂的单页应用。

到此，关于“如何用vue实现组件间参数传递”的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注编程网网站，小编会继续努力为大家带来更多实用的文章！