组件切换之笨办法、动态组件(is属性、keep-alive)、插槽(不具名、具名)

组件切换之笨办法、动态组件、动态组件之keep-alive、插槽(不具名、具名)

1 组件切换之笨办法

2 动态组件

3 动态组件之keep-alive

4 插槽

4.1 不具名插槽
4.2 具名插槽

1 组件切换之笨办法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/vue.js"></script>
    <script src="js/axios.js"></script>
</head>
<body>
<div id="app">
    <button @click="who='home'">首页</button>
    <button @click="who='good'">商品</button>
    <button @click="who='order'">订单</button>
    
    <hr>
    <home v-if="who=='home'"></home>
    <good v-else-if="who=='good'"></good>
    <order v-else></order>
</div>
</body>
</html>

<script>
    var home = {
        template: `
        

首页

`
} var good = { template: `

商品页面

`
} var order = { template: `

订单页面

`
} let vm = new Vue({ el: '#app', data: { who: 'home' }, components:{ home, good, order, } }); </script>

2 动态组件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/vue.js"></script>
    <script src="js/axios.js"></script>
</head>
<body>
<div id="app">

    <button @click="who='home'">首页</button>
    <button @click="who='good'">商品</button>
    <button @click="who='order'">订单</button>
    <hr>

    <component :is="who"></component>
    `component`标签的is属性等于组件名字,这里就会显示这个组件

</div>
</body>
</html>

<script>

    var home = {
        template: `
        

首页

`
} var good = { template: `

商品页面

`
} var order = { template: `

订单页面

`
} let vm = new Vue({ el: '#app', data: { who: 'home' }, components:{ home, good, order, } }); </script>

3 动态组件之keep-alive

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/vue.js"></script>
    <script src="js/axios.js"></script>
</head>
<body>
<div id="app">

    <button @click="who='home'">首页</button>
    <button @click="who='good'">商品</button>
    <button @click="who='order'">订单</button>
    <hr>

    keep-alive:用于缓存动态组件或者将组件保持在活动状态,以便在切换页面时不会销毁它们
    <keep-alive>
        <component :is="who"></component>
    </keep-alive>


</div>
</body>
</html>

<script>

    var home = {
        template: `
        

首页

`
} var good = { template: `

商品页面

搜索商品:

`
, data(){ return { name: '' } }, methods: { handleSearch(){ alert(this.name) } } } var order = { template: `

订单页面

`
} let vm = new Vue({ el: '#app', data: { who: 'home' }, components:{ home, good, order, } }); </script>

4 插槽

4.1 不具名插槽

插槽:一般情况下,编写完一个组件之后,组件的内容都是写死的,需要加数据,只能去组件中修改,
	扩展性很差。然后就出现了插槽这个概念,只需要在组件中添加<slot></slot>,
	就可以在body的组件标签中加内容。
--使用步骤:		
	1.在组件的html的任意位置,放个标签
    	<slot></slot>
    2.后期再父组件中使用该组件时
        <lin>
            放内容
        </lin>
    3.放的内容,就会被渲染到slot标签中
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/vue.js"></script>
    <script src="js/axios.js"></script>
</head>
<body>
<div id="app">
    <lin>
        <div>
            我是div
        </div>
    </lin>

    <hr>
    <lin>
        <img src="./img/1.jpg" alt="" height="200">
    </lin>
</div>
</body>
</html>

<script>

    var lin = {
        template: `
        

我是一个组件

我是组件内部的h2

`
} let vm = new Vue({ el: '#app', data: { }, components:{ lin } }); </script>

4.2 具名插槽

--使用步骤:	
	1 组件中可以留多个插槽,命名
        <div>
            <h1>我是一个组件</h1>
            <slot name="middle"></slot>
            <h2>我是组件内部的h2</h2>
            <slot name="footer"></slot>
        </div>
	2 在父组件中使用时,指定某个标签渲染到某个插槽上
        <lin>
            <div slot="footer">
                我是div
            </div>
            <img src="https://scpic.chinaz.net/files/default/imgs/2023-05-12/23659b1edfc0a984.jpg" alt="" slot="middle">
        </lin>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/vue.js"></script>
    <script src="js/axios.js"></script>
</head>
<body>
<div id="app">
    <lin>
        <div slot="footer">
            我是div
        </div>
        <img src="./img/2.jpg" alt="" slot="middel">
    </lin>

</div>
</body>
</html>

<script>

    var lin = {
        template: `
        

我是一个组件

我是组件内部的h2

`
} let vm = new Vue({ el: '#app', data: { }, components:{ lin } }); </script>

你可能感兴趣的:(vue,前端,前端,javascript,vue.js,slot,keep-alive,component,is属性)