码迷,mamicode.com
首页 > 其他好文 > 详细

VUE简略

时间:2019-09-09 14:32:01      阅读:72      评论:0      收藏:0      [点我收藏+]

标签:bind   script   string   接收   rom   name   html   port   color   

1.父组件、子组件传值

父组件:

<template>
  <div id="app">
      <h1>
        {{title}}
      </h1>
      <users v-bind:list="list" psMsg="父传子的内容:叫爸爸" @transfer="getUsername($event)"></users>
      <h1>{{username}}</h1>
  </div>
</template>

<script>
import Users from ‘./components/Users‘

export default {
  name: ‘App‘,
  data(){
    return {
      ‘username‘:‘‘,
      ‘title‘:‘sssssssssssssssssss‘,
      ‘list‘:[‘111‘,‘222‘,‘333‘]
    }
  },
  components:{
    "users":Users
  },
  methods:{
    getUsername:function(msg){
        this.username = msg;
    }
  }
}
</script>

<style>
</style>

 子组件

<template>
  <div class="users">
      <ul>
        <li v-for="user in users">
            {{user}}
        </li>
      </ul>
      <ul>
        <li v-for="l in list">
            {{l}}
        </li>
      </ul>
      <p>子组件接收到内容:{{ psMsg }}</p>
      <p><button @click="setUsername">传值</button></p>
  </div>
</template>

<script>


export default {
  name: ‘users‘,
  data(){
    return {
        users:[‘aaaa‘,‘bbbb‘,‘cccc‘],
        username:‘子组件传过来的---张学友‘,
    }
  },
 // props:[‘psMsg‘,"list"],
  props:{
      ‘psMsg‘:{
          type:String
      },
      ‘list‘:{
          type:Array
      }
  },
  methods:{
      setUsername:function(){
          this.$emit(‘transfer‘,this.username);
      }
  }
}
</script>

<style>
</style>

  

VUE简略

标签:bind   script   string   接收   rom   name   html   port   color   

原文地址:https://www.cnblogs.com/finnlee/p/11491385.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!