Vue之间的组件传值（简单不啰嗦，一试就会）

情况一: 父————子（超简单！！）

<div id="app">
        <!-- 父到子 -->
        <hello v-bind:msg2='msg' my-msg='abc'></hello>
</div>

const father=new Vue({
	el:'#app',
	data(){
		return {
                    msg:'hello'
			}
		},
       methods:{
           parentFn(data){
               console.log('父组件',data);
                }
            },
       components:{
                hello:{
                    props:['msg2','myMsg'],
                    template:'<h1>这是我的组件，消息{{msg2}}----{{myMsg}}</h1>'
                }
            }
		});
      结果：这是我的组件，消息hello----abc

情况二： 子————父（也超简单！！！）

<div id="app">
        <life @newmsg='newmsg'></life>
        <p>{{msg}}</p>
</div>

	const father=new Vue({
			el:'#app',
			data(){
				return {
                    msg:'hello'
				}
			},
            methods:{
                newmsg(data){
                    this.msg=data
                }
            },
            components:{
                life:{
                    data(){
                        return{
                            msg:'change'
                        }
                    },
                    template:'<button @click="fn">按钮</button>',
                    methods:{
                       fn(){
                    this.$emit('newmsg',this.msg)
                    console.log();
                }
            }
                }
            }
		});

情况三：非父子组件传值

<!-- 组件A： -->
<com-a></com-a>
<!-- 组件B： -->
<com-b></com-b>

<script>
  // 中间组件
  var bus = new Vue()
  // 通信组件
  var vm = new Vue({
    el: '#app',
    components: {
      comB: {
        template: '<p>组件A告诉我：{{msg}}</p>',
        data() {
          return {
            msg: ''
          }
        },
        created() {
          // 给中间组件绑定自定义事件 注意:如果用到this 需要用箭头函数
          bus.$on('tellComB', (msg) => {
            this.msg = msg
          })
        }
      },
      comA: {
        template: '<button @click="emitFn">告诉B</button>',
        methods: {
          emitFn() {
            // 触发中间组件中的自定义事件
            bus.$emit('tellComB', '土豆土豆我是南瓜')
          }
        }
      }
    }
  })
</script>

其他的特殊组件传值 1.$refs————ref 首先，$refs是一个对象,所有注册ref的元素和组件，都是$refs这一对象的(我喜欢的，一定要得到.jpg！) 举个例子，我们不使用$emit和props也能访问子组件的内容

<div id="app">
    <navbar ref="navbar"></navbar>
</div>
    
 Vue.component('navbar',{
    template:'<div>ppppp</div>',
    data:function () {
        return {
            navs:11
        }
    }
});
new Vue({
    el:'#app',
    mounted:function () {
        //这里怎么直接访问navbar的navs值呢
        console.log(this.$refs.navbar.navs); //输出11
    }
})

获取页面的元素内容

<div id="app">
        <p ref=thisP>{{name}}</p>
</div>

const app=new Vue({
    el:'#app',
    data:{
        name:'莹莹'
    }
})
console.log(app.$refs.thisP.textContent); //莹莹
值就非常简单的传出去啦

小小注意点：听好啦！！ 因为dom是异步更新的，而$refs又不是响应式的，无法抓取被更新后的内容。所以如果想要让后台获取你更新后的dom，需要

app.$nextTick(()=>{
    console.log(app.$refs.thisP.textContent);
})
//简单来说 $nextTick就是当数据更新了，在dom中渲染后，
自动执行该函数，页面就能知道你的数据被更新成啥熊样了

喜欢的朋友点个赞赞再走吧~~~~~~~~~