父→子：在子组件注册时写入props，并指定验证要求，父组件时使用v-bind绑定传入数据
html
复制代码
//父组件：
<Menu class="Menu" :MenuList="MenuList" :showUnderLine="showUnderLine"></Menu>
data(){
return{
showUnderLine:true,
MenuList:[
'时间是什么?',
'时间性质',
'大尺度时间',
'精密时间',
'关于时间的传说',
'时间简史'
],
}
}
//子组件Menu ：
props: {
MenuList: Array,
showUnderLine: {
type: Boolean,
default: false
}
},
子→父：子组件将要渲染的数据绑定触发事件，将数据在事件函数中通过this.$emit("父组件函数名"，数据)将数据传给父组件；
html
复制代码
//父组件，绑定自定义事件jumpTo等待触发：
<Menu @jumpTo="jumpTo"></Menu>
methods:{
jumpTo(index){
this.$router.push({path:"/MenuPage"+index})
}
},
//子组件Menu ,先在标签上绑定事件，再在函数中传值：
jumpTo(index){
this.$emit('jumpTo', index)
},
html
复制代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<body>
<div id="app">
<h2>信息:{{message_now}}</h2>
<input v-model="message_now" v-focus><br>
<button @click="addObv()">添加观察者</button><br>
<button @click="publish_message()">发布</button>
<ul>
<li v-for="(item,index) in observers" :key="item.id">
<h2>观察者姓名{{item.name}}</h2>
<h3>观察者信息{{item.message}}</h3>
</li>
</ul>
</div>
</body>
<script>
new Vue({
el:'#app',
data() {
return {
message_now:'',
observers:[{
name:'',
message:'',
getNewMessage:function(){
this.message=message_now
}
}]
}
},
methods: {
addObv:function(){
const observers={
name:'obv1',
message:this.message
};
this.observers.push(observer);
},
publish_message:function(){
this.observers.forEach(observer=>{
observer.item='obv1',
observer.message=this.message_now
})
}
},
})
</script>
</html>
html
复制代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<body>
<div id="app">
<h2 v-if="isLogin">已登录</h2>
<a @click="login()">登录</a>
<a @click="exit()">注销</a>
</div>
<script>
new Vue ({
el:'#app',
data:function(){
return{
isLogin:false
}
},
methods:{
login:function () {
this.isLogin=true
},
exit:function () {
this.isLogin=false
}
}
})
</script>
</body>
</html>
超级难的组件题
html
复制代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
.son {
width: 250px;
height: 250px;
}
.head {
width: 250px;
height: 50px;
text-align: center;
line-height: 50px;
}
tr {
height: 40px;
cursor: pointer;
}
th {
border: 1px solid rgb(0, 0, 0);
border-collapse: collapse;
}
.table {
width: 250px;
display: flex;
}
.table_item {
flex: 1;
border: 1px solid;
text-align: center;
}
.right {
width: 250px;
height: 250px;
position: absolute;
right: 0;
top: 0;
background-color: red;
}
</style>
<body>
<div id="app">
课程:<input type="text" v-model="course"><br>
日期:<input type="text" v-model="date"><br>
时长:<input type="text" v-model="duration"><br>
<button @click="add">add</button>
<div class="son">
<div class="head">今日学习进程</div>
<div class="result">
<my-table name="课程" date="日期" duration="时长" :data="obj" @delete-row="deleteRow"></my-table>
</div>
</div>
</div>
</body>
<script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
<script>
Vue.component('my-table', {
props: {
name: String,
date: String,
duration: String,
data: Array
},
template: `
<div>
<div class="table">
<div class="table_item">{{name}}</div>
<div class="table_item">{{date}}</div>
<div class="table_item">{{duration}}</div>
<div class="table_item">操作</div>
</div>
<div v-for="(item, index) in data" :key="index" class="table">
<div class="table_item">{{item.course}}</div>
<div class="table_item">{{item.date}}</div>
<div class="table_item">{{item.duration}}</div>
<div class="table_item">
<button @click="deleteRow(index)">删除</button>
</div>
</div>
</div>
`,
methods: {
deleteRow(index) {
this.$emit('delete-row', index);
}
}
})
new Vue({
el: '#app',
data() {
return {
course: '',
date: '',
duration: '',
obj: [],
}
},
methods: {
add() {
if (this.course && this.date && this.duration) {
this.obj.push({
course: this.course,
date: this.date,
duration: this.duration
});
this.course = "";
this.date = "";
this.duration = "";
}
},
deleteRow(index) {
this.obj.splice(index, 1);
}
}
});
</script>
</html>