Vue——常用组件
<script src="../lib/vue.js"></script> 都要在头部导入包1. 基础的基础Component，Portlet<body><div id="my&quo
·
<script src="../lib/vue.js"></script> 都要在头部导入包
1. 基础的基础
Component，Portlet
<body>
<div id="my">
<today-weather></today-weather> //自定义组件
</div>
<script>
Vue.component('today-weather',{
template:'<div>aaaaaaaaaaaaa</div>'
});
var my = new Vue({
el:'#my'
})
</script>
</body>
2. 局部的组件
Vue.js的组件不仅可以单独声明注册使用，还可以在Vue实例中进行局部注册使用
<body>
<div id="my">
<my-weather></my-weather>
</div>
<script>
var WeatherComponent = {
template:'<div>123132121</div>'
};
var my = new Vue({
el:'#my',
data:{
},
components:{
'my-weather':WeatherComponent
}
});
</script>
</body>
3. 表行组件
<body>
<div id="my">
<h1>最期待的游戏是：</h1>
<table border="1">
<tr>
<td>编号</td>
<td>游戏名称</td>
</tr>
<tr is="my-row1"></tr>
<tr is="my-row2"></tr>
<tr is="my-row3"></tr>
</table>
</div>
<script>
Vue.component('my-row1',{
template:'<tr><td>(1)</td><td>塞尔达传说：荒野之息</td></tr>'
});
Vue.component('my-row2',{
template:'<tr><td>(2)</td><td>新马里奥赛车</td></tr>'
});
Vue.component('my-row3',{
template:'<tr><td>(3)</td><td>喷射乌贼娘2代</td></tr>'
});
var my = new Vue({
el:'#my',
data:{},
methods:{}
});
</script>
</body>
4. 组件中的数据
为Vue.js组件添加数据，使组件可以动态显示各种数据，注意是数据函数，不是数据属性
<body>
<div id="my">
<div>今天的天气是<today-weather/></div>
</div>
<script>
Vue.component('today-weather',{
template:'<strong>{{todayWeather}}</strong>',
data:function(){
return {todayWeather:'雨加雪'};
}
});
var my = new Vue({
el:'#my',
});
</script>
</body>
5. 组件中的传递数据
可接受参数的组件
<body>
<div id="my">
<h1>成绩评价</h1>
<test-resule :score="50"></test-resule>
<test-resule :score="65"></test-resule>
<test-resule :score="90"></test-resule>
<test-resule :score="100"></test-resule>
</div>
<script>
Vue.component('test-resule',{
props:['score'],//表示可以接受什么样的参数
template:'<div><strong>{{score}}分，{{testResult}}</strong></div>',
computed:{
testResult:function(){
var strResult = "";
if(this.score<60)
strResult = "不及格";
else if(this.score<90)
strResult = "中等生";
else if(this.score<=100)
strResult = "优等生";
return strResult;
}
}
});
var my = new Vue({
el:'#my',
});
</script>
</body>
6. 传递变量
<body>
<div id="my">
<div>请输入名字：<input v-model="myname"></div>
<hr>
<say-hello :pname="myname"></say-hello>
</div>
<script>
Vue.component('say-hello',{
props:['pname'],
template:'<div>你好，<strong>{{pname}}</strong></div>',
});
var my = new Vue({
el:'#my',
data:{
myname:'aaa'
}
});
</script>
</body>
7. 参数验证
<body>
<div id="my">
<h1>身世之谜</h1>
<show-member-info name="aaa" :age="20" :detail="{address:'earth',language:'世界语'}"></show-member-info>
</div>
<script>
Vue.component('show-member-info',{
props:{
name:{
type:String,
required:true,
},
age:{
type:Number,
validator:function(value){
return value>=0 && value <=130;
}
},
detail:{
type:Object,//数组类型
default:function(){
return{
address:'US',
language:'English'
};
}
},
},
template:'<div>姓名：{{this.name}}<br/>'+
'年龄：{{this.age}}岁<br/>'+
'地址{{this.detail.address}}<br/>'+
'语言{{this.detail.language}}</div>',
});
var my = new Vue({
el:'#my',
});
</script>
</body>
8. 事件传递
v-on 侦听组件事件，当组件出发事件后进行事件处理
$emit 触发事件，并将数据提交给事件侦听者
<body>
<div id="my">
<h1>人生加法</h1>
<add-method :a="6" :b="12" v-on:add_event="getAddResult"></add-method>
<hr>
<h3>{{result}}</h3>
</div>
<script>
Vue.component('add-method',{
props:['a','b'],
template:'<div><button v-on:click="add">加吧</button></div>',
methods:{
add:function(){//子组件
var value =0;
value = this.a + this.b;
this.$emit('add_event',{//事件发送的形式传输给父组件
result:value
});
}
},
});
var my = new Vue({
el:'#my',
data:{
result:0
},
methods:{
getAddResult:function(pval){//作事件触发的第二个参数
this.result = pval.result;
}
},
});
</script>
</body>
9. slot插槽
slot是父组件与子组件的通讯方式，可以将父组件的内容显示在子组件当中
<body>
<div id="my">
<say-to pname="aaa">111111</say-to>
<say-to pname="bbb">222222</say-to>
<say-to pname="ccc">333333</say-to>
</div>
<script>
Vue.component('say-to',{
props:['pname'],
template:'<div>'
+'你好,<strong>{{pname}}</strong>!'
+'<slot></slot>'//显示子组件中的内容
+'</div>',
});
var my = new Vue({
el:'#my',
});
</script>
</body>
组合slot
在子组件中通过为多个slot进行命名，来接受父组件的不同内容的数据
<body>
<div id="my">
<nba-all-stars c="奥尼尔" pf="加内特">
<span slot="sf">皮尔斯</span>
<span slot="sg">雷阿伦</span>
<span slot="pg">隆多</span>
</nba-all-stars>
</div>
<script>
Vue.component('nba-all-stars',{
props:['c','pf'],
template:'<div>'
+'<div>中锋：{{c}}</div>'
+'<div>大前：{{pf}}</div>'
+'<div>小前：<slot name="sf"></slot></div>'
+'<div>分卫：<slot name="sg"></slot></div>'
+'<div>控卫：<slot name="pg"></slot></div>'
+'</div>',
});
var my = new Vue({
el:'#my',
});
</script>
</body>
前往低代码交流专区
更多推荐
1
0- 0
已为社区贡献2条内容
所有评论(0)