1.父组件传给子组件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>父传子</title>
</head>
<body>
<!--传值-->
<!--创建组件-->
<template id="account">
<div>
<h1>组件:{{name1}}</h1>
<h1>年龄:{{age1}}</h1>
</div>
</template>
<div id="app">
<!--使用组件-->
<account1 :name1="name" :age1="age"></account1>
</div>
</body>
</html>
<script src="vue.js"></script>
<script>
// 定义和祖册组件
Vue.component('account1',{
template:'#account',//用的是组件的id
// 子组件接受值(当接受的类型为空的时候什么类型都显示)
props:{
name1:'',
age1:Array,
}
})
new Vue({
//管理边界
el:'#app',
//data存放数据(true为 显示，false为隐藏)
data:{
name:'小桌子',
age:[13,15,16]
},
})
</script>
2.子组件传给父组件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>子传父</title>
</head>
<body>
<!--创建组件-->
<!--子组件的内容-->
<template id="account">
<div>
<h1 @click="sendData">发送的数据为</h1>
</div>
</template>
<!--父组件的内容-->
<div id="app">
<!--使用组件-->
{{name}}
<account1 v-on:send="getData"></account1>
</div>
</body>
</html>
<script src="vue.js"></script>
<script>
// 定义和祖册组件
Vue.component('account1',{
template:'#account',//用的是组件的id
//定义子组件的方法
methods:{
sendData(){
// $emit两个参数（第一个参数是父组件的函数，第二个参数是子组件的内容）
this.$emit('send',123)
}
}
})
new Vue({
//管理边界
el:'#app',
//data存放数据(true为 显示，false为隐藏)
data:{
name:''
},
// 父组件的方法
methods:{
getData(aa){
this.name=aa
console.log(aa)
}
}
})
</script>
