• 微信公众号:美女很有趣。 工作之余,放松一下,关注即送10G+美女照片!

Vue – 父子组件间的参数传递

开发技术 开发技术 5小时前 2次浏览

目录
  • 前言
    • 父组件向子组件传递参数(props)
    • 子组件向父组件传递参数(自定义事件)
      • setup自定义事件
      • methods自定义事件

前言

记录下Vue中父子组件中的参数传递

父组件向子组件传递参数(props)

  • App.vue
<template>
  <Test @sub-event="onTestClick" :url="theme6" />
</template>
<script>
import Test from './components/test.vue'
import theme6 from './assets/home/theme6.jpg'

export default {
  name: 'App',
  components: {
    Test
  },
  setup () {
    return {
      theme6
    }
  }
}
</script>
  • test.vue
<template>
  <img :src="url" />
</template>

<script>
export default {
  name: 'test',
  props: {
    url: {
      type: String,
      default: ''
    }
  },
  setup (props, context) {
    console.log(props.url)
  }
}
</script>
  • 结果

Vue - 父子组件间的参数传递


子组件向父组件传递参数(自定义事件)

  • app.vue
<Test @sub-event="onTestClick" :url="theme6" />

export default {
	setup () {
	 /**
      * 自定义事件监听与参数获取
      * @param event
      */
	  function onTestClick (event) {
	    console.log(event)
	  }
	  return {
	    theme6,
	    onTestClick
	  }
	}
}

setup自定义事件

test.vue

<template>
  <img @click="onImgClick" :src="url" class="size"   />
</template>

<script>

const param = 1

export default {
  name: 'test',
  props: {
    url: {
      type: String,
      default: ''
    }
  },
  setup (props, context) {
    console.log(props.url)
    /**
     * 写法一: setup自定义事件
     * 自定义事件与参数传递
     */
    function onImgClick () {
      context.emit('sub-event', param)
    }
    return {
      onImgClick
    }
  }
}
</script>

methods自定义事件

  • test.vue
<template>
  <img @click="onImgClick" :src="url" class="size"   />
</template>

<script>
const param = 1
export default {
  name: 'test',
  props: {
    url: {
      type: String,
      default: ''
    }
  },
  methods: {
    /**
     * 写法二: methods自定义事件
     * 自定义事件与参数传递
     */
    onImgClick () {
      this.$emit('sub-event', param)
    }
  }
}
</script>
  • setupmethods中定义本质相同,自定义事件点击结果如下:

Vue - 父子组件间的参数传递



– End –




梦想是咸鱼

关注一下吧

Vue - 父子组件间的参数传递

程序员灯塔
转载请注明原文链接:Vue – 父子组件间的参数传递
喜欢 (0)