在vue中 子组件是默认无法访问到父组件data中的数据和methods中的方法的,所以我们需要使用特定的方法来完成它。
一、父组件向子组件传值
通过 props声明传递过来的值即可：
流程:
1、通过属性绑定把父组件中需要传递的内容通过v-bind的形式传递给子组件，供子组件使用。
2、在子组件内部通过props来获取父组件传递过来的属性名(props是单向向下绑定的，可以通过父组件中改变而同时改变下级的内容,但是反过来会报错，可以通过在data中定义一个属性并将这个 prop 用作其初始值，同步对组件的修改，再通知父组件更新)。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edg">
<title>Document</title>
<script src="../js/vue.js"></script>
</head>
<body>
<div id="app">
<!-- 父组件，可以在引用子组件的时候，通过属性绑定(v-bind:)的形式，把需要传递给子组件的数据，以属性绑定的形式，传递到子组件内部，供子组件使用 -->
<com1 v-bind:parentmsg="msg" @click="change()"></com1>
</div>
</body>
<script>
var vm = new Vue({
el:"#app",
data:{
msg:'123 A -父组件中的数据'
},
methods:{},
components:{
com1:{
data(){ //注意:子组件中的data数据，并不是通过父组件传递过来的，而是子组件自身私有的，比如：子组件通过Ajax，请求回来的数据，都可以放到data身上
//Data上的数据都是可读可写的
return{
title:'123',
content:'qqq'
}
},
template:'<h1>这是子组件----{{ parentmsg }}</h1>',
//注意：组件中的所有props中的数据 都是通过父组件传递给子组件的。
//props 中的数据，都是只读的，无法重新赋值
props:['parentmsg'], //把父组件传递过来的parentmsg属性 现在props数组中定义一下，这样才能使用这个数据
methods:{
change(){
this.parentmsg = '1111'
}
}
}
}
})
</script>
</html>
点击改变prop属性时
二、父组件向子组件传递方法
可以通过$emit方法来调用父组件传递过来的方法与传值类似，
案例中在父组件中声明了一个show方法,通过@func将方法传递给子组件。
流程:
1.通过自定义一个事件名来将方法绑定到子组件上传到子组件内部。
2.子组件通过$emit()来调用父组件的方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edg">
<title>Document</title>
<script src="../js/vue.js"></script>
</head>
<body>
<div id="app">
<!-- 父组件想子组件传递方法，使用的是 事件绑定机制 v-on 当我们自定义了一个事件属性后，那么，子组件就能够通过某些方法来调用传递进去的这个方法了 -->
<com2 @func="show"></com2>
</div>
<template id="tmp1">
<div>
<h1>这是子组件</h1>
<input type="button" value="这是子组件中的按钮-点击它触发父组件传递过来的func方法" @click="myclick">
</div>
</template>
</body>
<script>
// 声明一个子组件，并添加到父组件的components中
var com2 = {
template:'#tmp1',
data(){
return{
sonmsg:{name:'son',age:6}
}
},
methods:{
myclick(){
//emit 触发
this.$emit('func',this.sonmsg)
}
}
}
var vm = new Vue({
el:"#app",
data:{
FormSon:null
},
methods:{
show(data){
console.log('调用了父组件身上的show 方法-----'+data.name)
this.FormSon = data;
}
},
components:{
com2
}
})
</script>
</html>如有不对希望各位批评指正，在此感谢大家!
