Vue基础练习组件之间数据传递

最新推荐文章于 2024-10-18 15:58:53 发布

初闻女人香

最新推荐文章于 2024-10-18 15:58:53 发布

阅读量745

点赞数 29

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/m0_70251011/article/details/136321061

版权

父→子：在子组件注册时写入props，并指定验证要求，父组件时使用v-bind绑定传入数据

	 //父组件：
	<Menu class="Menu" :MenuList="MenuList"  :showUnderLine="showUnderLine"></Menu>
	data(){
            return{
                showUnderLine:true,
                MenuList:[
                    '时间是什么?',
                    '时间性质',
                    '大尺度时间',
                    '精密时间',
                    '关于时间的传说',
                    '时间简史'
                ],
          }
   }
   
   //子组件Menu ：
   props: {
            MenuList: Array,
            showUnderLine: {
                type: Boolean,
                default: false
            }
        },

子→父：子组件将要渲染的数据绑定触发事件，将数据在事件函数中通过this.$emit(“父组件函数名”，数据)将数据传给父组件；

//父组件，绑定自定义事件jumpTo等待触发：
	<Menu @jumpTo="jumpTo"></Menu>
	methods:{
            jumpTo(index){
                this.$router.push({path:"/MenuPage"+index})
            }
        },
   
   //子组件Menu ,先在标签上绑定事件，再在函数中传值：
  jumpTo(index){
                this.$emit('jumpTo', index)
            },

在这里插入图片描述

<!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>

在这里插入图片描述

<!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>

超级难的组件题

<!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>