首页 > 编程 > JavaScript > 正文

vue实现组件之间传值功能示例

2019-11-19 13:29:51
字体:
来源:转载
供稿:网友

本文实例讲述了vue实现组件之间传值功能。分享给大家供大家参考,具体如下:

slot标签:

想向封装好结构的组件中插入内容,需要借助<slot></slot>

在组件之中进行关联:如

模板中:

<slot name='txt'></slot>

组件调用中:

<p slot='txt'></p>

注:如果只有slot上面每一定义name属性,则只能有一个slot

<div class='box'>  <com>    <p slot='txt'></p>  </com></div><template id="c">  <div>    <slot name="txt"></slot>  </div></template>
Vue.component('com',{  template:"#c"})

父组件向子组件传值props

父组件:

<template>  <child :parent-msg='a'></child></template>

子组件:

child:{  template:'#chi'  props:['parentMsg']}

子组件向父组件的传值:

vue只运行数据的单选传递,在子组件向父组件的传值中,需要事件触发

子组件:

<template>  <div @click="up"></div></template>
methods:{ up(){  this.$emit('fn','msg') // 主动触发fn方法,msg是需要传递的数据 }}

父组件:

<div>  <child @fn="getval"></child></div>
methods:{  getval(msg){ // msg接收到的数据    this.msg=msg  }}

希望本文所述对大家vue.js程序设计有所帮助。

发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表