vue-传值

• 属性传值(父传子)
  传值：string number boolean
  引用：array object 改变一个地方的数据，另一个地 方的数据也会被改变

<template>
  <div id="app">
     <app-header v-bind:title="title"></app-header>
     <users v-bind:users="users"></users>
     <users v-bind:users="users"></users>
     <app-footer v-bind:title="title"></app-footer>
  </div>
</template>
//行为
<script>
import Header from './components/Header'
import Users from './components/Users'
import Footer from './components/Footer'
export default {
  name: 'App',
  data()
  {
    return{
           users: [{name:"Herry",position:"Emliy",show:false},
                  {name:"Herry",position:"Emliy",show:false},
                  {name:"Herry",position:"Emliy",show:false},
                  {name:"Herry",position:"Emliy",show:false},
                  {name:"Herry",position:"Emliy",show:false},
                  {name:"Herry",position:"Emliy",show:false},
                  {name:"Herry",position:"Emliy",show:false},
                  {name:"Herry",position:"Emliy",show:false},
                  {name:"Herry",position:"Emliy",show:false},
                  {name:"Herry",position:"Emliy",show:false},
                  {name:"Herry",position:"Emliy",show:false},
                  {name:"Herry",position:"Emliy",show:false},
                 ], 
title: "传递的是一个值、包括(number,string,boolean)", 
    }
  },
  components:{
    "users":Users,
    "app-header":Header,
    "app-footer":Footer,
  }
}
</script>

1.传引用

<script>
export default {
  name:'users',
  props:["users"],
  data() {
  }
}
</script>

2.传值

<script>
export default {
     name:'app-header',
    props:{
      title:{
       type:String
      }
   },
   data(){
     return{
        title1:"Vue.js Demo",
           }
   }
}
</script>

• 事件传值(子传父)

<template>
  <header @click="changeTitle">
  <h1>{{title1}}   {{title}}</h1>
  </header>
</template>

<script>
export default {
     name:'app-header',
    props:{
      title:{
       type:String
      }
   },
   data(){
     return{
        title1:"Vue.js Demo",
     }
   },
  methods:{
  changeTitle:function()
  {
    //注册一个事件
     this.$emit("titleChanged","子向父组件传值");
  }
  }
}
</script>

//模板:html
<template>
  <div id="app">
     <app-header v-on:titleChanged="updataTitle($event)" v-bind:title="title"></app-header>
     <users v-bind:users="users"></users>
     <users v-bind:users="users"></users>
     <app-footer v-bind:title="title"></app-footer>
  </div>
</template>
// 获取值
 methods:{
    updataTitle(title)
    {
       this.title = title;
    }

},