vue中插槽slot的使用

插槽的使用

通过作用域插槽v-slot:default 将子组件的数据传递到父组件中去,一般在插件里用~
经常看到有form表单里看到有scope.row,用来获取这一行的数据,这个也是作用域插槽

父组件 Father.vue

<template>
	<div>
		<son>
			<template v-slot:default="isData">
				
				
				
				{{ isData.user.name }}
			template>
		son>
	div>
template>
<script>
import Son from './components/Son'
export default {
	components:{ Son }
}
script>

子组件 Son.vue

<template>
	<h1>
		
		<slot :user="user"> 
		
			{{ user.name }} 
		slot>
	h1>
template>
<script>
export default {
	data(){
		return {
			user:{
				name:'son',
				age:20
			}
		}
	}
}
script>

你可能感兴趣的:(Vue基础部分,vue)