VUE简略

Posted 2022-10-09 finnlee

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>