留留工作室<!--
* @Author: krsea 965837746@qq.com
* @Date: 2022-02-22 17:59:29
* @LastEditors: krsea 965837746@qq.com
* @LastEditTime: 2025-03-09 20:12:03
* @FilePath: \案例源代码\08第4章Vue.js组件第2节组件通信\07第4章Vue.js组件第2节组件通信（内容分发）.html
* @Description:
*
* Copyright (c) 2025 by ${git_name_email}, All Rights Reserved.
-->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="app">
<h1>我是父组件的标题</h1>
<my-component>
<p>初始内容1</p>
<p>初始内容2</p>
</my-component>
</div>
<template id="temp">
<div>
<h2>我是子组件的标题</h2>
<slot>
<p>如果父组件没用插入内容,我将作为默认出现</p>
</slot>
</div>
</template>
<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
Vue.component('my-component', {
template: '#temp',
})
new Vue({
el: '#app'
})
</script>
</body>
</html>07第4章Vue.js组件第2节组件通信（内容分发）
未经允许不得转载：留留工作室 » 07第4章Vue.js组件第2节组件通信（内容分发）
