🍖Vue 组件间通信

引入

组件是 vue.js最强大的功能之一，而组件实例的作用域是相互独立的，这就意味着不同组件之间的数据无法相互引用, 如果想要组件间通信就需要使用一些 Vue 提供给我们的方法, 下面介绍几种常见的方法

一.父组件向子组件传值

1.方式

• 父组件定义 js 变量, 通过属性指令方式放置在子组件的标签上, 子组件内使用 props 来指定接收父组件传来的属性指令

// proos 指定传值的属性
props:['myname','myage'],

// 还可以以对象的方式限制传过来值的类型
props:{
    myname:String,  // 限制myname属性的值为字符串类型
    myage:Number,   // 限制myage属性传过来的值为数值
},

2.示例

    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>


<div id="app">
    <h3>根组件</h3>
    <button @click="root1" class="btn btn-info">根组件按钮</button>
    <br>
    <!--父传子-->
    <!--直接通过"属性=值"方式传递-->
    <child2 myname="xing" myage="100"></child2>
    <br>
    <!--通过属性指令传一个js变量,父可在data中定义该变量-->
    <child2 :myname="name" :myage="age"></child2>
    <br>
    <!--通过属性指令直接传字符串类型的值-->
    <child2 :myname="'song'" :myage="88"></child2>
    <hr>
    <myhead></myhead>
    <hr>
</div>

<script>
    // 根(父)组件
    var vm = new Vue({
        el: '#app',
        data: {
            // 通过js变量给子组件进行传值
            name:'shawn',
            age:99
        },
        methods: {
            root1() {
                alert('我是根div的按钮!')
            }
        },
        // 根组件的局部组件,组件名"child2"
        components:{
            child2:{
                // 在局部组件中渲染父组件传过来的值
                template:`
                <div>
                <h4>根下局部组件</h4>
                    <button @click="handleClick" class="btn btn-success">根下的局部组件按钮:{{isShow?'隐藏':'展示'}}</button>
                    <p v-show="isShow">人面不知何处去