父组件向子组件传递数据
父组件代码
<template>
<h2>App</h2>
<p>msg: {{msg}}</p>
<!-- 传递数据 -->
<child :msg="msg" msg2="cba"/>
</template>
<script lang="ts">
import {
reactive,
ref,
} from 'vue'
import child from './child.vue'
export default {
components: {
child
},
setup () {
const msg = ref('abc')
return {
msg,
fn
}
}
}
</script>
子组件代码
<template>
<div>
</div>
</template>
<script lang="ts">
import {
ref,
defineComponent
} from 'vue'
export default defineComponent({
name: 'child',
props: ['msg'],
setup (props, content}) {
console.log(props.msg)
console.log(content.attrs.msg2)
},
})
</script>
子组件向父组件传递数据
父组件代码
<template>
<h2>App</h2>
<child @fn="fn" >
</child>
</template>
<script lang="ts">
import {
reactive,
ref,
} from 'vue'
import child from './components/child.vue';
export default {
components: {
child
},
setup () {
function fn (content: string) {
console.log(content)
}
return {
fn
}
}
}
</script>
子组件代码
<template>
<div>
<button @click="update">更新</button>
</div>
</template>
<script lang="ts">
import {
ref,
defineComponent
} from 'vue'
export default defineComponent({
name: 'child',
setup (props, {attrs, emit, slots}) {
function update () {
emit('fn', '++')
}
return {
update,
}
},
})
</script>
slot(父组件灵活使用子组件)
父组件代码
<template>
<child>
<!-- slot插槽属性在vue3中被弃用 -->
<!-- <p slot='header'>我是头部插入的组件</p>
<p slot='bottom'>我是插入尾部的组件</p> -->
<!-- 新版 -->
<template v-slot:header>
头头头
</template>
<template v-slot:bottom>
魏薇伪
</template>
</child>
</template>
<script lang="ts">
import {
reactive,
ref,
} from 'vue'
import child from './components/child.vue';
export default {
components: {
child
},
setup () {
}
}
</script>
子组件代码
<template>
<div>
<p>我是头部</p>
<slot name='header'></slot>
<p>我是尾部</p>
<slot name='bottom'></slot>
</div>
</template>
<script lang="ts">
import {
ref,
defineComponent
} from 'vue'
export default defineComponent({
name: 'child',
setup () {},
})
</script>
混合使用
<template>
<p>father页面 -----------</p>
<p> {{msg}}</p>
<button @click="fn('--')" class='aa'>更新</button>
<child :msg="msg" msg2="cba" @fn="fn" class='acs'>
<!-- slot插槽属性在vue3中被弃用 -->
<!-- <p slot='header'>我是头部插入的组件</p>
<p slot='bottom'>我是插入尾部的组件</p> -->
<!-- 新版 -->
<template v-slot:header>
头头头
</template>
<template v-slot:bottom>
尾尾尾
</template>
</child>
</template>
<script lang="ts">
import {
reactive,
ref,
} from 'vue'
import child from './components/child.vue';
export default {
components: {
child
},
setup () {
const msg = ref('abc')
function fn (content: string) {
msg.value += content
}
return {
msg,
fn
}
}
}
</script>
<template>
<div>
<p>child页面 -----------</p>
<h3>{{n}}</h3>
<h3>{{m}}</h3>
<h3>{{msg}}</h3>
<h3>{{$attrs.msg2}}</h3>
<p>我是头部</p>
<slot name='header'></slot>
<p>我是尾部</p>
<slot name='bottom'></slot>
<button @click="update">更新</button>
</div>
</template>
<script lang="ts">
import {
ref,
defineComponent
} from 'vue'
export default defineComponent({
name: 'child',
props: ['msg'],
setup (props, {attrs, emit, slots}) {
console.log(props)
const m = ref(2)
const n = ref(3)
function update () {
m.value += 2
n.value += 2
emit('fn', '++')
}
return {
m,
n,
update,
}
},
})
</script>