目录
Vue%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0%E3%80%8B-%E7%BB%84%E4%BB%B6-%E7%88%B6%E5%AD%90%E7%BB%84%E4%BB%B6%E4%BC%A0%E5%80%BC%E7%9A%84%E6%96%B9%E5%BC%8F%E5%8F%8A%E7%9B%B8%E5%85%B3%E7%BB%86%E8%8A%82-toc" style="margin-left:0px;">《Vue学习笔记》-组件-父子组件传值的方式及相关细节
1.父组件向子组件传值的方式
2.组件-父组件把方法传递给子组件-1
3.组件-父组件把方法传递给子组件-2（增加子组件向父组件传值）
《Vue学习笔记》-组件-父子组件传值的方式及相关细节
1.父组件向子组件传值的方式
<!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=edge">
<title>title</title>
<script src="./lib/vue-2.4.0.js"></script>
</head>
<body>
<div id="app">
<!--父组件，可以在引用子组件的时候，通过 属性绑定（v-bind）的形式，把 需要传递给 子组件的数据，
以属性绑定的形式，传递到子组件内部，供子组件使用-->
<!-- 注意：绑定的关键字（如：parentMsg）采用驼峰命名，在子组件内部使用关键字时，必须采用小写 -->
<com1 v-bind:parentmsg="msg"></com1>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
msg: '父组件中的数据'
},
methods: {},
components: {
//结论：经过尝试，发现，子组件中，默认无法访问到 父组件中的 data上的数据 和 methods中的方法
com1: {
data() {
/*
注意：1.子组件中的data数据，并不是通过 父组件 传递过来的，而是子组件自身私有的，
比如：子组件通过Ajax,请求回来的数据，都可以放在data身上
--data上的数据都是 可读 可写的
2.组件中 所有 props 中的数据都是通过 父组件 进行传递的，不属于自己的，只是需要用到外部数据，进行验证
--props的数据只可以读，不可以写（如果写，会警告）
*/
return {
title: 'title',
content: 'content'
}
},
template: '<h1>子组件中的数据--{{parentmsg}}</h1>',
//把父组件传递过来的parentMsg属性，先在props数组中，定义一下（可以认为，经过 子组件内部 认证后）,这样，才能使用这个数据
//注意： 组件中 所有的 props 中的数据，都是通过 父组件 传递给 子组件 的
//注意：如果 绑定关键字 采用 驼峰命名法，需要在子组件中全部采用小写，否则容易出错，其他直接复制 绑定的关键字 即可
props: ['parentmsg']
}
}
})
</script>
</body>
</html>2.组件-父组件把方法传递给子组件-1
<!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=edge">
<title>title</title>
<script src="./lib/vue-2.4.0.js"></script>
</head>
<body>
<div id="app">
<!--
父组件向子组件 传递 方法，使用的是 事件绑定机制，v-on;
当我们自定义了一个事件属性之后，那么，子组件 就能够通过某些方式，来调用传递进去的 这个方法了
-->
<!--注意：func 这个名称自己写就OK，只要 show 符合就行,但是不从这里 传参 ，从子组件的 $emit 方法进行 传参-->
<com1 @func="show"></com1>
</div>
<template id='temp1'>
<div>
<h1>这是 子组件</h1>
<input type="button" value="点击按钮，触发子组件调用父组件方法-func" @click="myclick">
</div>
</template>
<script>
//定义一个字面量类型的 组件模板对象
var com1 = {
template: '#temp1',
methods: {
myclick() {
console.log('触发子组件myclick方法')
//当点击子组件的按钮时候，通过 $emit方法 拿到并调用 父组件 传递过来的 func 方法，并调用这个方法
//在 $emit 进行传参
this.$emit('func', 123, 123) //emit 意为：触发，调用，发射的意思
}
}
}
var vm = new Vue({
el: '#app',
data: {},
methods: {
//show 方法 还可以传参show(data1,data2...)
show(data1, data2) {
console.log('调用父组件的 show 方法' + data1 + data2)
}
},
components: {
com1 //该写法，相当于 com2: com2
}
})
</script>
</body>
</html>3.组件-父组件把方法传递给子组件-2（增加子组件向父组件传值）
<!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=edge">
<title>title</title>
<script src="./lib/vue-2.4.0.js"></script>
</head>
<body>
<div id="app">
<!--
父组件向子组件 传递 方法，使用的是 事件绑定机制，v-on;
当我们自定义了一个事件属性之后，那么，子组件 就能够通过某些方式，来调用传递进去的 这个方法了
-->
<!--注意：func 这个名称自己写就OK，只要 show 符合就行,但是不从这里 传参 ，从子组件的 $emit 方法进行 传参-->
<com1 @func="show"></com1>
</div>
<template id='temp1'>
<div>
<h1>这是 子组件</h1>
<input type="button" value="点击按钮，触发子组件调用父组件方法-func" @click="myclick">
</div>
</template>
<script>
//定义一个字面量类型的 组件模板对象
var com1 = {
template: '#temp1',
//新：定义数据对象
data() {
return {
sondata: {
name: '大头儿子',
age: 6
}
}
},
methods: {
myclick() {
console.log('触发子组件myclick方法')
//当点击子组件的按钮时候，通过 $emit方法 拿到并调用 父组件 传递过来的 func 方法，并调用这个方法
//在 $emit 进行传参，注意是this.sondata,因为是使用自己的数据，this. 表明当前对象
this.$emit('func', this.sondata) //emit 意为：触发，调用，发射的意思
}
}
}
var vm = new Vue({
el: '#app',
data: {
dataFromSon: null
},
methods: {
//show 方法 还可以传参show(data1,data2...)
// show(data1, data2) {
// console.log('调用父组件的 show 方法' + data1 + data2)}
show(data) {
//console.log('调用父组件的 show 方法（尝试向父组件data对象）+' + data)
console.log(data)
//子组件向父组件传值,在该方法被调用的时候，同时将数据写入父组件的数据中
this.dataFromSon = data
}
},
components: {
com1 //该写法，相当于 com2: com2
}
})
</script>
</body>
</html>
