作用域插槽 向父组件传递 <template slot-scope="{ row, index }" slot="dateNo">

作用域插槽 向父组件传递 <template slot-scope="{ row, index }"  slot="dateNo">

slotTest1

<slot name="action" :kk="kk"></slot>

slotTest2

<!--
* @description text
!-->
<template>
    <div>
      <slot-test1>
        <template slot-scope="{ kk }" slot="action">
          <slot name="action" :kk="kk"></slot>
          111 {{kk}}
        </template>
          </slot-test1>
    </div>
</template>

<script>
import slotTest1 from ‘./slotTest1‘
export default {
  name: ‘slotTest‘,
  components: {
    slotTest1
  },
  props: {},
  data () {
    return {}
  },
  watch: {},
  computed: {},
  methods: {},
  created () {
  },
  mounted () {
  }
}
</script>
<style lang="less" scoped>
</style>

父组件调用

<slot-test2>
      <template slot-scope="{ kk }" slot="action">
        666 {{kk}}
      </template>
    </slot-test2>

原文地址:https://www.cnblogs.com/pengchenggang/p/10877404.html

时间: 2024-07-31 03:18:19

作用域插槽 向父组件传递 <template slot-scope="{ row, index }" slot="dateNo">的相关文章

vuejs子组件向父组件传递数据

子组件通过$emit方法向父组件发送数据,子组件在父组件的模板中,通过自定义事件接收到数据,并通过自定义函数操作数据 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script type="text/javascript" src="

Vue父组件向子组件传递方法(自定义方法)并且子组件向父组件传递数据

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" con

子组件通过this.$emit方式向父组件传递参数的问题

子组件通过this.$emit向父组件传递参数,并且又需要在父组件中使用自定义参数的时候,对应下面两种情况,来接受参数 子组件传出单个参数时: // 子组件 this.$emit('test',this.param) // 父组件 @test='test($event,userDefined)' 子组件传出多个参数时: // 子组件 this.$emit('test',this.param1,this.param2, this.param3) // 父组件 arguments 是以数组的形式传入

详解vue父组件传递props异步数据到子组件的问题

案例一 父组件parent.vue // asyncData为异步获取的数据,想传递给子组件使用 <template> <div> 父组件 <child :child-data="asyncData"></child> </div> </template> <script> import child from './child' export default { data: () => ({ as

vue子组件向父组件传递数据

子组件 <template> <div id="header"> <input type="text" v-model="username" @change="setUser"> </div> </template> <script type="text/ecmascript-6"> export default{ props: { }

vue组件-子组件向父组件传递数据-自定义事件

自定义事件 我们知道,父组件是使用 props 传递数据给子组件,但如果子组件要把数据传递回去,应该怎样做?那就是自定义事件!

vue 实现,子组件向父组件 传递数据

首先理清组件之间的关系 组件与组件之间,还存在着不同的关系.父子关系与兄弟关系(不是父子的都暂称为兄弟吧). 父子组件 父子关系即是组件 A 在它的模板中使用了组件 B,那么组件 A 就是父组件,组件 B 就是子组件. 先写子组件: 绑定一个单击事件 <el-button type="primary" icon="el-icon-search" @click="search" style="background: #5b6270;

vue子组件修改父组件传递过来的值

这里不再赘述父子组件及子父组件传值,不懂的同学可以翻看我以前写过的关于两者传值的文章 父子组件传值:https://www.cnblogs.com/Sky-Ice/p/9267192.html 子父组件传值:https://www.cnblogs.com/Sky-Ice/p/9289922.html 直接进入正题,把一个布尔值传递给子组件,然后,在子组件中修改该值,会报错 Avoid mutating a prop directly since the value will be overwri

react父子组件通讯-----&gt;下面用到的ref属性调用子组件的方法,可以实现子组件往父组件传递参数,可以通过在父组件的方法中调用子组件的方法,通过返回值来拿到值,也可以在子组件中,对数据处理完后,调用父组件传给子组件的参数或者方法,来实现传参,

<scripttype="text/babel"> var Child =React.createClass({ getInitialState: function() { return {color:"",childMsg:"我是子组件的信息"}; }, changeColor: function(e) { this.setState({color:e.target.getAttribute("data-color&quo