<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
.sz-language span {
padding: 0 15px;
line-height: 35px;
display: inline-block;
border: 1px solid #ccc;
cursor: pointer;
}
.sz-language span.on {
background: blue;
color: white;
border-color: blue;
}
</style>
<body>
<div id="app">
<!-- v-model 在内部为不同的输入元素使用不同的 property 并抛出不同的事件:text 和 textarea 元素使用 value property 和 input 事件;
checkbox 和 radio 使用 checked property 和 change 事件;
select 字段将 value 作为 prop 并将 change 作为事件。 -->
<!--v-model = v-bind:value + v-on:input -->
<!-- <sz-language v-model='language' /> -->
<sz-language :value='language' @input='languageChange'>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
/* 父子组件通讯(数据传递)
1、父组件向子组件传值:使用自定义属性,子组件使用 props 来接收
2、子组件向父组件传值:使用自定义事件,子组件使用 $emit('自定义事件', data) */
//自定义组件
Vue.component('sz-language',{
template:`
<div class='sz-language'>
<span
v-for='item in list'
:class='{"on":value==item.id}'
@click='$emit("input",item.id)'
v-text='item.language'>
</span>
</div>
`,
//自定义属性
props:['value'],
data:function(){
return{
list:[
{id:1,language:'汉语'},
{id:2,language:'英语'},
{id:3,language:'德语'},
{id:4,language:'法语'},
{id:5,language:'日语'},
{id:6,language:'韩语'},
{id:7,language:'意大利语'},
{id:8,language:'俄语'}
]
}
}
})
//根组件
var app = new Vue({
el:'#app',
data:{
language:1
},
methods:{
languageChange(e){
this.language = e
}
}
})
</script>
</body>
</html>