<template> <div class="father"> <h2>父组件App</h2> <!--1.绑定属性--> <SonCom message="father message"/> </div> </template>中的 <SonCom message="father message"/>什么意思
时间: 2023-08-14 19:01:42 浏览: 51
在这个示例中,`<SonCom message="father"/>`是父组件`App`中使用子组件`SonCom`的语法。这行代码的含义是将`SonCom`作为子组件插入到父组件的模板中。
`SonCom`是一个自定义的子组件,通过在父组件的模板中使用它,我们可以在页面上渲染出该子组件的内容。
`message="father message"`是用于向子组件传递属性的语法。在这个例子中,父组件通过`message`属性将字符串"father message"传递给子组件。子组件可以通过`props`接收并使用这个属性。
通过这种方式,父组件可以向子组件传递数据和属性,实现组件之间的交互和数据传递。
相关问题
<div id="app"> <!-- 顶部快捷导航start --> <div class="shortcut"> <div class="w"> <div class="fl"> <ul> <li>购物商城欢迎您! </li> <li> <a href="#">请登录</a> <a href="#" class="style-red">免费注册</a> </li> </ul> </div> <div class="fr"> <ul> <li><a href="#">我的订单</a></li> <li class="spacer"></li> <li> <a href="#">我的购物</a> <i class="icomoon"></i> </li> <li class="spacer"></li> <li><a href="#">商城会员</a></li> <li class="spacer"></li> <li><a href="#">企业采购</a></li> <li class="spacer"></li> <li><a href="#">关注商城</a> <i class="icomoon"></i></li> <li class="spacer"></li> <li><a href="#">客户服务</a> <i class="icomoon"></i></li> <li class="spacer"></li> <li><a href="#">网站导航</a> <i class="icomoon"></i></li> </ul> </div> </div> </div> <!-- 顶部快捷导航end <img src="img/logo.png" alt="">--> <div class="car-header"> <div class="w"> <div class="car-logo"> <b>购物车</b> </div> </div> </div> </div>帮我改写成组件化
可以将这段代码分成两个组件:顶部快捷导航和购物车头部。
1. 顶部快捷导航组件:
```html
<template>
<div class="shortcut">
<div class="w">
<div class="fl">
<ul>
<li>购物商城欢迎您!</li>
<li>
<a href="#">请登录</a>
<a href="#" class="style-red">免费注册</a>
</li>
</ul>
</div>
<div class="fr">
<ul>
<li><a href="#">我的订单</a></li>
<li class="spacer"></li>
<li>
<a href="#">我的购物</a>
<i class="icomoon"></i>
</li>
<li class="spacer"></li>
<li><a href="#">商城会员</a></li>
<li class="spacer"></li>
<li><a href="#">企业采购</a></li>
<li class="spacer"></li>
<li><a href="#">关注商城</a> <i class="icomoon"></i></li>
<li class="spacer"></li>
<li><a href="#">客户服务</a> <i class="icomoon"></i></li>
<li class="spacer"></li>
<li><a href="#">网站导航</a> <i class="icomoon"></i></li>
</ul>
</div>
</div>
</div>
</template>
<script>
export default {
name: "Shortcut"
}
</script>
```
2. 购物车头部组件:
```html
<template>
<div class="car-header">
<div class="w">
<div class="car-logo">
<b>购物车</b>
</div>
</div>
</div>
</template>
<script>
export default {
name: "CartHeader"
}
</script>
```
然后在父组件中使用这两个子组件:
```html
<template>
<div id="app">
<Shortcut />
<CartHeader />
</div>
</template>
<script>
import Shortcut from "@/components/Shortcut.vue";
import CartHeader from "@/components/CartHeader.vue";
export default {
components: {
Shortcut,
CartHeader
}
}
</script>
```
<!-- 结算模块 --> <div class="cart-floatbar"> <div class="select-all"> <input type="checkbox" name="" id="d" class="checkall">全选 </div> <div class="operation"> <a href="javascript:;" class="remove-batch"> 删除选中的商品</a> <a href="javascript:;" class="clear-all">清理购物车</a> </div> <div class="toolbar-right"> <div class="amount-sum">已经选<em>1</em>件商品</div> <div class="price-sum">总价: <em> </em></div> <div class="btn-area">去结算</div> </div> </div>改成组件,把父组件shop-cart
可以将上述代码封装成一个名为 "CartFloatBar" 的子组件,然后在父组件 "ShopCart" 中引用该组件,代码如下所示:
CartFloatBar.vue:
```
<template>
<div class="cart-floatbar">
<div class="select-all">
<input type="checkbox" name="" id="d" class="checkall">全选
</div>
<div class="operation">
<a href="javascript:;" class="remove-batch"> 删除选中的商品</a>
<a href="javascript:;" class="clear-all">清理购物车</a>
</div>
<div class="toolbar-right">
<div class="amount-sum">已经选<em>{{ selectedCount }}</em>件商品</div>
<div class="price-sum">总价: <em>{{ totalPrice }}</em></div>
<div class="btn-area">去结算</div>
</div>
</div>
</template>
<script>
export default {
name: 'CartFloatBar',
props: {
selectedCount: {
type: Number,
default: 0
},
totalPrice: {
type: Number,
default: 0
}
}
}
</script>
```
ShopCart.vue:
```
<template>
<div class="shop-cart">
<!-- 购物车列表 -->
<!-- ... -->
<!-- 结算模块 -->
<cart-float-bar :selectedCount="1" :totalPrice="99"></cart-float-bar>
</div>
</template>
<script>
import CartFloatBar from './CartFloatBar.vue'
export default {
name: 'ShopCart',
components: {
'cart-float-bar': CartFloatBar
}
}
</script>
```
在 "ShopCart" 中引用 "CartFloatBar" 组件时,使用 kebab-case 的组件名称 "cart-float-bar",因为在 HTML 中,只能使用 kebab-case 的组件名称。同时,在引用组件时,需要将组件文件引入,并在 components 中注册组件。