利用props父子传值
<div id="app">
父组件，可以在引用子组件的时候， 通过 属性绑定（v-bind:） 的形式, 把 需要传递给 子组件的数据，以属性绑定的形式，传递到子组件内部，供子组件使用
<com1 v-bind:parentmsg="msg"></com1></div>
<script>
创建 Vue 实例，得到 ViewModel
var vm = new Vue({ el: '#app', data: { msg: '123 啊-父组件中的数据' }, methods: {}, components: { *结论：经过演示，发现，子组件中，默认无法访问到 父组件中的 data 上的数据 和 methods 中的方法* com1: { data() { **注意： 子组件中的 data 数据，并不是通过 父组件传递过来的，而是子组件自身私有的，比如： 子组件通过 Ajax ，请求回来的数据，都可以放到 data 身上；** *data 上的数据，都是可读可写的；* return { title: '123', content: 'qqq', **简单数据类型这样就可修改传过来的值** forSon: this.parentmsg, **复杂数据类型更改的话，会和父元素的data数据一起更改，因为引用的是一个内存地址 ，使用数据深拷贝可以实现更改数据不影响父级数据** foruser:JSON.parse(JSON.stringify(this.parentuser)) } }, template: '<h1 @click="change">这是子组件 --- {{ parentmsg }}</h1>', *注意： 组件中的 所有 props 中的数据，都是通过 父组件传递给子组件的* *props 中的数据，都是只读的，无法重新赋值* props: ['parentmsg'], *把父组件传递过来的 parentmsg 属性，先在 props 数组中，定义一下，这样，才能使用这个数据* directives: {}, filters: {}, components: {}, methods: { change() { this.parentmsg = '被修改了' } } } }});</script>
利用$emit子父传值
<div id="app">
父组件向子组件 传递 方法，使用的是 事件绑定机制； v-on, 当我们自定义了 一个 事件属性之后，那么，子组件就能够，通过某些方式，来调用 传递进去的 这个 方法了
func是一个自定义的事件 -
<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', **通过指定了一个 Id, 表示 说，要去加载 这个指定Id的 template 元素中的内容，当作 组件的HTML结构** data() { return { sonmsg: { name: '小头儿子', age: 6 } } }, methods: { myclick() { **当点击子组件的按钮的时候，如何 拿到 父组件传递过来的 func 方法，并调用这个方法？？？** **emit 英文原意： 是触发，调用、发射的意思** // this.$emit('func123', 123, 456) this.$emit('func', this.sonmsg) } }}// 创建 Vue 实例，得到 ViewModelvar vm = new Vue({ el: '#app', data: { datamsgFormSon: null }, methods: { show(data) { // console.log('调用了父组件身上的 show 方法: --- ' + data) // console.log(data); this.datamsgFormSon = data } }, components: { com2 // com2: com2 }});</script>
</body>
provide / inject实现父子传值
在一个祖先组件中 传递一个数据 让所有的子孙后代组件共享 可以隔代传递
**provide 和 inject 主要为高阶插件/组件库提供用例。并不推荐直接用于应用程序代码中。 这对选项需要一起使用，以允许一个祖先组件向其所有子孙后代注入一个依赖，不论组件层次有多深，并在起上下游关系成立的时间里始终生效。** <div id="app"> <h1>我在vm实例中显示这个数据------{{ msg }}</h1> <son></son></div><template id="sonTem"> <div> <h1>我在直接子组件中显示这个数据---{{ sayhi }}---{{ sonmsg }}</h1> <sondeson></sondeson> </div></template><template id="sondeson"> <div> <h1>我在直接孙子组件中显示这个数据---{{ sayhi }}---{{ sondesonmsg }}</h1> </div></template><script> // 孙子组件 var sondeson = { template: '#sondeson', inject:[ "sayhi" ], data() { return { sondesonmsg:'孙子' } } } // 儿子组件 var son = { template: '#sonTem', data() { return { sonmsg:'儿子' } }, inject:[ "sayhi" ], components:{ sondeson } } var vm = new Vue({ el: '#app', data: { msg: '我是根组件的数据', sayhi:'你好' }, **provide 选项应该是一个对象或返回一个对象的函数** **provide 如果要传递 data上的数据 那么 provide要写成一个返回对象的函数 类似于 组件中的 data** // provide:{ // sayhi: this.sayhi // }, provide(){ return { sayhi:this.sayhi } }, **provide 可以实现类似于 vuex 的效果** // provide(){ // return { // app:this // } // }, components:{ son } })</script>**provide 和 inject 绑定并不是可响应的。这是刻意为之的。然而，如果你传入了一个可监听的对象，那么其对象的属性还是可响应的。**利用$hrefs实现子父传值
在组件中 可以给组件的成员(元素，子组件)上添加 ref 来获得组件中的成员
这样可以在父组件中直接获取添加了ref属性的 子组件的对象 从而可以直接点出 子组件上的data数据与methods
也可以获取到添加了ref属性的元素对象
<div id="app">
<input type="button" value="获取元素" @click="getElement" ref="mybtn"><h3 id="myh3" ref="myh3">哈哈哈， 今天天气太好了！！！</h3><hr><login ref="mylogin"></login></div>
<script>
var login = { template: '<h1>登录组件</h1>', data() { return { msg: 'son msg' } }, methods: { show() { console.log('调用了子组件的方法') } }}// 创建 Vue 实例，得到 ViewModelvar vm = new Vue({ el: '#app', data: {}, methods: { getElement() { // console.log(document.getElementById('myh3').innerText) **this.$refs 来获取元素和组件** **ref 是 英文单词 【reference】 值类型 和 引用类型 referenceError** // console.log(this.$refs.myh3.innerText) // console.log(this.$refs.mylogin.msg) // this.$refs.mylogin.show() } }, components: { login }});</script>
利用$parent父子传值 与利用$children子父传值
指定已创建的实例之父实例，在两者之间建立父子关系。子实例可以用 this.$parent 访问父实例，子实例被推入父实例的 $children 数组中。
节制地使用 $parent 和 $children - 它们的主要目的是作为访问组件的应急方法。更推荐用 props 和 events 实现父子组件通信
<div id="app"> <h1>{{msg}}</h1> <com1></com1> <com2></com2> </div> <script> var vm = new Vue({ el: '#app', data: { msg:'我是父组件中的数据', }, mounted(){ this.$children.forEach(item=>{ console.log(item.name) }) }, components:{ com1:{ data(){ return{ name:'我是1', title:'我是1号组件' } }, template:'<h1>{{title}}===={{$parent.msg}}</h1>' }, com2:{ data(){ return{ name:'我是2', age:18 } }, template: '<h1>{{age}}==={{$parent.msg}}</h1>' } } }) </script>