<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>组件之间通信</title>
<script src="https://cdn.bootcss.com/vue/2.6.6/vue.js"></script>
<style>
.wrap{
display: flex;
align-items: center;
justify-content: center;
}
.wrap input{
background-color: #ccc;
}
</style>
</head>
<body>
<div id="app">
<custom-select btn-value="搜索"></custom-select>
<custom-select btn-value="查找"></custom-select>
</div>
<script>
//使用同一组件，改变某些参数，使用组件父子之间通信，在自定义标签中加入自定义属性，在组件中使用props声明，再使用v-bind绑定数据。
Vue.component("customSelect",{
props:["btnValue"],
template:`
<section class="wrap">
<h2>我是组件app标题</h2>
<input type="text" v-bind:value="btnValue"/>
</section>
`
}),
new Vue({
el:"#app"
})
</script>
</body>
</html>vue组件父子通信
猜你喜欢
转载自blog.csdn.net/zhangqling/article/details/88537737
今日推荐
周排行