子组件和父组件之间的传值

框架文件在C:\vuetest\vuebaby

1.父向子传值 

父中用v-bind绑定在标签上， 子中用对象中的props来接收

父app.vue

<template>
  <div id="app">
    <aheader></aheader>
      <users v-bind:users="users"></users>//绑定属性
     <afooter></afooter> 
  </div>
</template>

<script>
import Header from './components/Header'
import Users from  './components/Users'
import Footer from './components/footer'
export default {
  name: 'App',
  data(){
    return{
      title:"this is my first Vue project",
      users: [
      {'name':'Henry','position':'programmer',show:false},
      {'name':'Bucky','position':'programmer',show:false},
      {'name':'Emily','position':'programmer',show:false},
      {'name':'Henry','position':'programmer',show:false},
      {'name':'Bucky','position':'programmer',show:false},
      {'name':'Emily','position':'programmer',show:false},
      {'name':'Henry','position':'programmer',show:false},
      {'name':'Bucky','position':'programmer',show:false},
      {'name':'Emily','position':'programmer',show:false}
      ]
    }
  },
  components:{
    'users':Users,//引入子组件
    'aheader':Header,
    'afooter':Footer
  }
}
</script>

子组件

<template>
  <div class="hello">
      <ul class="users">
        <li v-for='user in users' v-on:click="user.show=!user.show">
          <h2>{{user.name}}</h2>
          <h3 v-show="user.show">{{user.position}}</h3>
        </li>
      </ul>
  </div>
</template>

<script>
export default {
  name: 'users',
  props:{
    users:{
      type:Array
    }
    
  }
  
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
  font-weight: normal;
}
.users{
  width: 100%; 
  max-width:1200px;
  margin: 40px auto;
  padding:0 20px;
  box-sizing:border-box;
}
ul {
  list-style-type: none;
  padding: 0;
  display: flex;
  flex-wrap:wrap;
  list-style-type: none
}
li {
  flex-grow:1; 
  flex-basis:200px;
  text-align: center;
  padding:30px;
  border: 1px solid #222;
  margin: 10px;
}
a {
  color: #42b983;
}
</style>

显示

 

 

 

 

 

 

传值 string number boolean

引用 数组和 object

 

 

坑1：

出错代码：

<template>
	<header>
		<h1>{{title}}</h1>
		<p>{{vaHTitle}}</p>/*改成文件内部变量*/
		 <button @click="delString">改变</button>
	</header>
</template>

<script type="text/javascript">
export default{
	name:'aheader',
	data(){
		return {
			title:'this is from header'/*增加一个变量*/
		}
	},
	props:{
		vaHTitle:{
			type:String
		}
	},
	methods:{
		delString:function () {
			this.vaHTitle="changed";/*改成文件内部变量*/

} } } </script>

　　

改正代码: 

<template>
	<header>
		<h1>{{title}}</h1>
		<p>{{curHTitle}}</p>
		 <button @click="delString">改变</button>
	</header>
</template>

<script type="text/javascript">
export default{
	name:'aheader',
	data(){
		return {
			title:'this is from header',
			curHTitle:this.vaHTitle
		}
	},
	props:{
		vaHTitle:{
			type:String
		}
	},
	methods:{
		delString:function () {
			this.curHTitle="changed";
		}
	}
}
</script>

　

2.子向父传值

   子组件中 通过触发事件 在 delString:function 中通过this.$emit('fnName','params')固定函数传值

父组件中 通过在标签中绑定v-on:fnName=‘父组件里定义的事件函数名（$event）’ 获取参数， $event是固定的写法

header.vue

<template>
	<header>
		<h1>{{title}}</h1>
		<p>curHTitle:{{curHTitle}}</p>
		<p>vaHTitle:{{vaHTitle}}</p>
		 <button @click="delString">改变</button>
	</header>
</template>

<script type="text/javascript">
export default{
	name:'aheader',
	data(){
		return {
			title:'this is from header',
			curHTitle:this.vaHTitle//这种又多定义一变的，在子组件里不能改变值
		}
	},
	props:{
		vaHTitle:{
			type:String
		}
	},
	methods:{
		delString:function () {
			//this.curHTitle="changed";
			this.$emit('parentEvent','子向父传值')//通过这一步把字符串传给父组件的事件里 父组件中标签上用v-on：parentEvent 来接收

		}
	}
}
</script>

　　

 

<template>
  <div id="app">
    <aheader v-bind:vaHTitle="vaTitle" v-on:parentEvent="updataTitl($event)"></aheader>
      <users v-bind:users="users"></users>
      <users v-bind:users="users"></users>
     <afooter v-bind:vaTitle="vaTitle"></afooter> 
  </div>
</template>

<script>
import Header from './components/Header'
import Users from  './components/Users'
import Footer from './components/footer'
export default {
  name: 'App',
  data(){
    return{
      title:"this is my first Vue project",
      vaTitle:"this is from my parent vaTitle",
      users: [
      {'name':'Henry','position':'programmer',show:false},
      {'name':'Bucky','position':'programmer',show:false},
      {'name':'Emily','position':'programmer',show:false},
      {'name':'Henry','position':'programmer',show:false},
      {'name':'Bucky','position':'programmer',show:false},
      {'name':'Emily','position':'programmer',show:false},
      {'name':'Henry','position':'programmer',show:false},
      {'name':'Bucky','position':'programmer',show:false},
      {'name':'Emily','position':'programmer',show:false}
      ]
    }
  },
  components:{
    'users':Users,
    'aheader':Header,
    'afooter':Footer
  },
  methods:{
    updataTitl(titl){//接收子组件传来的参数 放在titl中
      this.vaTitle=titl
    }
  }
}
</script>

　　结果

改变后

 

 已经在子组件中做过新赋值的curTitle不会再改变了，父组件中的titl 接到子组件的值 发生了变化，这变化影响了footer.vue 并且还返回去影响了传值给自己（父组件app.vue）的子组件header.vue