vue学习笔记：6.3.父组件与子组件间的传值

父组件与子组件间的传值

1.父组件向子组件传值——使用 props传值

（1）子组件在 props 中定义属性（parentmsg）接收父组件（msg）的值。
（2）父组件在引用子组件的时候，通过属性绑定（v-bind:parentmsg=“msg”）的形式，把需要传递给子组件的数据，以绑定的形式，传递到子组件内部以供使用。

<div id="app">
<!-- <mylogin></mylogin> -->
<!-- <login></login> -->
<!-- 父组件，可以在引用子组件的时候，通过 属性绑定（v-bind:） 的形式，
把需要传递给子组件的数据，以绑定的形式，传递到子组件内部，供子组件使用 -->
<com1 v-bind:parentmsg = "msg"></com1>
</div>

<script>
// 通过 对象 字面量的形式，定义了一个 组件模板对象
var login = {
template: "<h3>11111111111</h3>"
}
// Vue.component("mylogin", login);

var vm = new Vue({
el: '#app',
data: {
msg: "123-父组件中的数据"
},
components: {
// "mylogin":  login
// login   //等价于 "login": login
com1: {
// 注意：子组件中的数据，并不是通过 父组件传递过来的，而是子组件自身私有的，
// 比如，子组件通过 Ajax ，请求回来的数据，都可以放到 data 身上
// data 中的数据，都是可读可写的
data: function() {
return {
title: "222",
content: "11111"
}
},
template: '<h1 @click="change">这是子组件---{{ parentmsg }}</h1>',
// 把父组件传递过来的 parentmsg 属性，先在 props 数组中定义一下，这样才能使用这个数据
// 注意：组件中的 所有 props 中的数据，都是通过父组件传递给子组件的
// props 中的数据，都是只读的，无法重新赋值
props: ["parentmsg"],
methods: {
change() {
this.parentmsg = "被修改了";    //不推荐这样修改 props 中的数据
}
}
}
},
methods: {

}
});
</script>

2.父组件向子组件传递方法，子组件向父组件传值——vm.$emit()

（1）父组件向子组件传递方法，使用的是 事件绑定机制（@func = “父组件中的方法名”）。
（2）使用 this.emit(“func”)在子组件中调用父组件的方法，若需要向父组件传参，则在emit(“func”) 在子组件中调用父组件的方法，若需要向父组件传参，则在emit(“func”)在子组件中调用父组件的方法，若需要向父组件传参，则在emit()中加入参数，如 this.$emit(“func”, 123, 456, this.sonmsg) 。

<div id="app">
<!-- 父组件向子组件传递方法，使用的是 事件绑定机制 -->
<com2 @func = "show"></com2>
</div>

<template id="tmpl">
<div>
<h1>这是子组件</h1>
<input type="button" value="这是子组件中的按钮，点击它，触发父组件传递过来的 func 方法" @click="myclick">
</div>
</template>

<script>
var com2 = {
template: "#tmpl",
data() {
return {
sonmsg: { name: "张三", age: 12 }
}
},
methods: {
myclick() {
// 调用父组件中的方法，并向父组件传参
this.$emit("func", 123, 456, this.sonmsg);
}
},
}
var vm = new Vue({
el: '#app',
data: {
msgFromSom: null
},
components: {
com2
},
methods: {
show(data, data2, sonmsg) {
this.msgFromSom = sonmsg;
consol
4000
e.log("调用了父组件上的show()---" + data + "--" + data2 + "--" + this.msgFromSom.name + "-" + this.msgFromSom.age);
}
}
});
</script>