Vue2.x---指令、组件(简洁详情版)

14 阅读9分钟

一、指令

1.v-text

-更新元素的textVContent

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="vue.js"></script>
</head>
<body>
    <div id="app">
        <div>{{magss}}</div>
        <div v-text="magss"></div>
    </div>
    <script>
        setInterval(function(){new Vue({
            el:"#app",
            data:{
                magss:"sssdsadad",
            },
            methods:{

            }
        })},5000)
      
    </script>
</body>
</html>

ps:v-text与“{{}}”的插入值功能是一样的,区别在于延时的时候,v-text不显示任何东西,而“{{}}”显示代码。

延时时:

不延时:

2.v-html

-更新元素的innerHTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="vue.js"></script>
</head>
<body>
    <div id="app">  
        <div>你看这个插入:{{magess}}</div>
        <div  v-text="`你看这个插入:${magess}`"></div>
        <div  v-html="`你看这个插入:${magess}`"></div>
    </div>
    <script>
        new Vue({
            el:"#app",
            data:{
                magess:'来自&lt;&lt;<a href="javascript:;">新华社</a>&gt;&gt;的消息'
            },
            methods:{
                
            }

        })
    </script>
</body>
</html>

ps:v-html可以实现传进来的值实现成html里面的标签实现。 

3.v-show

-根据表达式之真假值,切换元素的display CSS属性

it is test

显示或者隐藏按钮

it is originimal content

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="vue.js"></script>
    <style>
        #pop {
            position: fixed;
            width: 300px;
            height: 100px;
            background-color: brown;
            top: 50%;
            left: 50%;
            margin-left: -175px;
            margin-top: -50px;

        }

        #pop>span {
            margin-left: 95%;

        }

        #pop>span:hover {
            font-size: 20px;
        }
    </style>
</head>

<body>


    <div id="app">
        <button @click="open">检查浏览器版本</button>

        <div id="pop" v-show="show">

            <span @click="dianji">×</span>
            <p>您的浏览器版本过低,请升级到新版浏览器</p>
        </div>
    </div>
    <script>
        new Vue({
            el: "#app",
            data: {
                show:false

            },
            methods: {
                open() {
                    this.show = true;
                },
                dianji() {
                    this.show = false;
                }
            }
        })
    </script>

</body>

</html>

4.v-if

-根据表达式的值的真假条件渲染元素。在切换时元素及它的数据绑定/组件被销毁并重建

ps:当v-if的值等于true时则显示,false则不显示。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="vue.js"></script>
</head>
<body>
 <div id="app">
     <p v-if="ifvalue1">你看见我了对吧。</p>
     <p v-if="ifvalue2">你看不见我哦!</p>
 </div>

    <script>
        new Vue({
            el:"#app",
            data:{
                ifvalue1:true,
                ifvalue2:false
            },
            methods:{

            }
        })
    </script>
</body>
</html>

5.v-else

一为v-if 或者v-else-if 添加“else块. v-else-if

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="vue.js"></script>
</head>

<body>
    <div id="app">
        <h1 v-if="isLogin">
            <a href="javascript:;" @click="logins">登录</a>
            <a href="javascript:;">注册</a>
        </h1>
        <h1 v-else>
            Welcome dingding, <a href="javascript:;" @click="logout">注销</a>
        </h1>
    </div>

    <script>
        new Vue({
            el: "#app",
            data: {
                isLogin: true

            },
            methods: {
                logins() {
                    alert("登录成功");
                    this.isLogin = false;
                },
                logout() {
                    alert("注销成功");
                    this.isLogin = true;
                }

            }
        })
    </script>
</body>

</html>

通过v-if和v-else的判断进行,点击登录则不显示登录和注册,只显示注销。

 

6.v-else-if

-表示v-if的"else if 块”,可以链式调用

A
B
C
Not A/B/C
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="vue.js"></script>
</head>
<body>
    <div id="app">
        <div v-if="typess=='A'">A</div>
        <div v-else-if="typess=='B'">B</div>
        <div v-else-if="typess=='C'">C</div>
        <div v-else-if="typess=='D'">D</div>
    </div>
    <script>
        new Vue({
            el:"#app",
            data:{
                typess:"C"

            },
            methods:{

            }
        })
    </script>
    
</body>
</html>

7.v-for

-基于源数据多次渲染元素或模板块。此指令之值,必须使用特定语法alias in expression,为当前遍历的元素提供别名

  • {fitem}}
  • {i}}-{{item}}
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="vue.js"></script>
</head>

<body>
    <div id="app">
        <div v-for="i in arrys">{{i.name}}</div>
    </div>
    <script>
        new Vue({
            el: "#app",
            data: {
                arrys: [
                    { name: 'a' }, 
                    { name: 'b' }, 
                    { name: 'c' }, 
                    { name: 'd' }
                ]

            },
            methods: {

            }
        })
    </script>
</body>

</html>

​编辑

8.v-on

-绑定事件监听器。事件类型由参数指定。表达式可以是一个方法的名字或一个内联语句

-用在普通元素上时,只能监听原生DOM事件。用在自定义元素组件上时,也可以监听子组件触发的自定义事件

clickMe

<button  @click="funcClick" >clickMe

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="vue.js"></script>
</head>
<body>
    <div id="app">
        <button v-on:click="but1">弹出东西</button>
        <button @click="but2">我到底弹不弹</button>
    </div>
    <script>
        new Vue({
            el:"#app",
            data:{

            },
            methods:{
                but1(){
                    alert("我出来啦,我是 v-on:click");
                },
                but2(){
                    alert("我出来啦,我是 @click");
                }
            }
        })
    </script>
</body>
</html>

ps:v-on:click与@click是一样的,通常使用@click简写。

9.v-once

-只渲染元素和组件一次。随后的重新渲染,元素/组件及其所有的子节点将被视为静态内容并跳过。这可以用于优化更新性能。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="vue.js"></script>
</head>
<body>
    <div id="app">
        <h1 v-once>页面加载完成时间:{{new Date(timer).toLocaleString()}}</h1>
        <h1>当前系统时间:{{new Date(timer).toLocaleString()}}</h1>
    </div>
    <script>
       var vm= new Vue({
            el:"#app",
            data:{
                timer:new Date().getTime()
            },
            methods:{

            }
        });
        setInterval(function(){
            vm.timer=new Date().getTime();
        },1000)
    </script>
</body>
</html>

​编辑

 ps:当时间在进行刷新几时的时候,v-once可以让时间停止。

10.v-cloak

-这个指令保持在元素上直到关联实例结束编译。

-和CSS规则如[v-cloak] { display: none }一起用时,这个指令可以隐藏未编译的Mustache标签直到实例准备完毕。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="vue.js"></script>
    <style>
        [v-cloak]{
          display:none
        }
      </style>
</head>

<body>
    <div id="app">
        <h1 v-cloak>用户名:{{uname}}</h1>
        <h1 v-text="`用户名:${uname}`"></h1>
    </div>
    <script>
        setTimeout(function () {
            new Vue({
                el: "#app",
                data: {
                    uname: "dingding"
                },
                methods: {

                }
            })
        }, 5000)
    </script>
</body>

</html>

5秒前:

 5秒后:

 ps:v-cloak必须要和[v-cloak] { display: none }一起用时才能生效,弥补“{{}}”对于数据延时出现的乱码。

11.v-bind

-动态地绑定一个或多个特性,或一个组件 prop到表达式

-在绑定class 或style特性时,支持其它类型的值,如数组或对象

-在绑定prop时,prop 必须在子组件中声明。可以用修饰符指定不同的绑定类型

<a v-bind:href-"linkUrl" >home

<a :href"linkUrl">

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="vue.js"></script>
    <style>
        .active {
            width: 100px;
            height: 100px;
            background: green;
        }
    </style>

</head>

<body>
    <div id="app">
        <div v-bind:class="{'active':isActive}"></div>
    </div>
    <script>
        new Vue({
            el: "#app",
            data: {
                isActive: true
            },
            methods: {

            }
        })
    </script>
</body>

</html>

ps:v-bind:class可以通过isActive来决定是否显现。动态地绑定一个或多个特性

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="js/vue.js"></script>
</head>
<body>
  <div id="app">
    <h1>{{pm25}}</h1>
    <h1>{{pm25<100?'1.png':
          pm25<200?'2.png':
          pm25<300?'3.png':
                   '4.png'}}</h1>
    <img :src="pm25<100?'img/1.png':
               pm25<200?'img/2.png':
               pm25<300?'img/3.png':
                        'img/4.png'" alt="">
  </div>
  <script>
    var vm=new Vue({
      el:"#app",
      data:{
        pm25:68
      }
    })
    setInterval(function(){
      vm.pm25=parseInt(Math.random()*400);
    },1000)
  </script>
</body>
</html>

绑定前:

​编辑

绑定后:

​编辑

12.v-model

-在表单控件或者组件上创建双向绑定

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="vue.js"></script>
</head>
<body>
    <div id="app">
        <input type="text" v-model="kws"><button @click="search">百度一下</button>
    </div>
    <script>
        new Vue({
            el:"#app",
            data:{
                kws:""
            },
            methods:{
                search(){
                    console.log(`搜索 ${this.kws} 相关的内容...`)
                }
            }
        })
    </script>
    
</body>
</html>

添加v-model前:

​编辑

 添加v-model后:​编辑

13.v-pre

―跳过这个元素和它的子元素的编译过程。可以用来显示原始Mustache标签。跳过大量没有指令的节点会加快编译

{{'用户输入的内容为'+userName}}

 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="vue.js"></script>
</head>
<body>
    <div id="app">
        <h1 v-pre>Vue中采用{{变量}}语法来绑定HTML元素的内容</h1>
    </div>

    <script>
        new Vue({
            el:"#app",
            data:{

            },
            methods:{

            }
        })
    </script>
</body>
</html>

添加v-pre前:

添加v-pre后:

二、组件

1.组件化应用构建

允许我们使用小型、自包含和通常可复用的组件构建大型应用。,因为它是一种抽象,允许我们使用小型、自包含和通常可复用的组件构建大型应用。

组件(Component)是Vue.js最强大的功能之一。组件可以扩展HTML元素,封装可重用的代码。在较高层面上,组件是自定义元素

2.组件的创建和使用 

创建组件方式1:

//定义名为todo-item的新组件

Vue.component('todo-item', {

template: '

  • 这是个待办项
  • '

    })

    ·使用组件

    创建组件方式2:name.vue

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <script src="vue.js"></script>
        <script>
            // 注册
            Vue.component("my-counter",{
                template:`
                <h1>
                <p>我是插入的组件</p>
                <h1>`
            })
         
        </script>
    </head>
    <body>
        <div id="app">
            <ul>
                <li><my-counter></my-counter></li>
            </ul>
        </div>
        <script>
               // 创建根实例
            new Vue({
                el:"#app"
            })
        </script>
    </body>
    </html>
    

    三、复合组件

    组件也可以有多个组件构成,我们可以将这个组件称之为复合组件

    Vue.component('item',{

    template:'

  • A custom component!
  • '

    })

    Vue.component('my-list',{

    template:'

    '

    })

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <script src="vue.js"></script>
        <script>
        
         
            // 注册
            Vue.component("fu-counter",{
                template:`
                <h1>
                <p>我是插入的组件</p>
                <zi-counter></zi-counter>
                <h1>`
            })
            Vue.component("zi-counter",{
                template:`<p>我是复合组件</p>`
     
            })
          
        </script>
    </head>
    <body>
        <div id="app">
            <ul>
                <li><fu-counter></fu-counter></li>
            </ul>
        </div>
        <script>
               // 创建根实例
            new Vue({
                el:"#app"
            })
        </script>
    </body>
    </html>
    

    四、组件的生命周期

    要求在组件定义一个count
    -将count显示在视图中
    -在created时将数据初始化为10 
    -在mounted时启动定时器,每隔0.5s,将数据自增
    -在updated时判断数据大于20时,通过this $destroy将vue实例结束掉

    首先让我们来看一下经典的vue生命周期示意图:

    1、beforeCreate

      在实例初始化之后,数据观测和event/watcher时间配置之前被调用。

    2、created

      实例已经创建完成之后被调用。在这一步,实例已经完成以下的配置:数据观测,属性和方法的运算,watch/event事件回调。然而,挂载阶段还没开始,$el属性目前不可见。

    3、beforeMount

      在挂载开始之前被调用:相关的render函数首次被调用。
    该钩子在服务器端渲染期间不被调用。

    4、mounted

    el被新创建的 vm.el替换,并挂在到实例上去之后调用该钩子函数。如果root实例挂载了一个文档内元素,当mounted被调用时vm.el替换,并挂在到实例上去之后调用该钩子函数。如果root实例挂载了一个文档内元素,当mounted被调用时vm.el也在文档内。该钩子在服务端渲染期间不被调用。

    5、beforeUpdate

      数据更新时调用,发生在虚拟DOM重新渲染和打补丁之前。
    你可以在这个钩子中进一步第更改状态,这不会触发附加的重渲染过程。
    该钩子在服务端渲染期间不被调用。

    6、updated

      由于数据更改导致的虚拟DOM重新渲染和打补丁,在这之后会调用该钩子。
    当这个钩子被调用时,组件DOM已经更新,所以你现在可以执行依赖于DOM的操作。然而在大多数情况下,你应该避免在此期间更改状态,因为这可能会导致更新无限循环。
    该钩子在服务端渲染期间不被调用。

    7、activated

      keep-alive组件激活时调用。
    该钩子在服务器端渲染期间不被调用。

    8、deactivated

      keep-alive组件停用时调用。
    该钩子在服务端渲染期间不被调用。

    9、beforeDestroy 【类似于React生命周期的componentWillUnmount】

      实例销毁之间调用。在这一步,实例仍然完全可用。
    该钩子在服务端渲染期间不被调用。

    10、destroyed

      Vue实例销毁后调用。调用后,Vue实例指示的所有东西都会解绑定,所有的事件监听器会被移除,所有的子实例也会被销毁。

    钩子函数:

    <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <script src="js/vue.js"></script>
    </head>
    
    <body>
        <div id="app">
            <h1>数量:{{count}}</h1>
        </div>
        <script>
            new Vue({
                el: "#app",
                data: {
                    count: 0
                },
                //创建
                beforeCreate() {
                    console.log(`创建组件的data对象之前自动触发...`)
                },
                created() {
                    console.log(`创建组件的data对象之后自动触发...`)
                    this.count = 10;
                },
                //挂载
                beforeMount() {
                    console.log(`挂载组件内容到页面前自动触发...`)
                },
                mounted() {
                    console.log(`挂载组件内容到页面后自动触发...`)
                    setInterval(() => {
                        this.count++;
                    }, 1000)
                },
                //更新
                beforeUpdate() {
                    console.log(`更新组件的data中的变量前自动触发...`)
                },
                updated() {
                    console.log(`更新组件的data中的变量后自动触发...`)
                    if (this.count > 20) {
                        this.$destroy();
                    }
                },
                //销毁
                beforeDestroy() {
                    console.log(`销毁当前组件前自动触发...`)
                },
                destroyed() {
                    console.log(`销毁当前组件后自动触发...`)
                }
            })
        </script>
    
    </body>
    
    </html>
    

    五、自定义指令与过滤器

    1.自定义指令

    除了默认设置的核心指令( v-model和v-show ),Vue也允许注册自定义指令。注意,在Vue2.0里面,代码复用的主要形式和抽象是组件——然而,有的情况下,你仍然需要对纯DOM元素进行底层操作,这时候就会用到自定义指令。

    自定义指令:创建了一个叫做focus的指令
    Vue.directive('focus', {}) 
    使用指令:使用指令时,要加上v-,比如v-focus

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <script src="vue.js"></script>
        <script>
            Vue.directive("focus",{
                inserted(domElem){
                    domElem.focus();   //触发焦点
    
                }
            })
        </script>
    </head>
    <body>
        <div id="app">
            <input type="text" v-focus><button>百度一下</button>
        </div>
        <script>
            new Vue({
                el:"#app",
                data:{
    
                },
                methods:{
    
                }
            })
        </script>
    </body>
    </html>
    

    一打开网页,加入自定义指令前:

    一打开网页, 加入自定义指令前:

    指令定义函数提供了几个钩子函数 :

    • bind:只调用一次,指令第一次绑定到元素时调用,用这个钩子函数可以定义一个在绑定时执行一    次的初始化动作。 
    • inserted:被绑定元素插入父节点时调用(父节点存在即可调用,不必存在于document 中)。 
    • update:被绑定元素所在的模板更新时调用,而不论绑定值是否变化。通过比较更新前后的绑定      值,可以忽略不必要的模板更新(详细的钩子函数参数见下)。
    • unbind:只调用一次,指令与元素解绑时调用。 -解束缚:只调用一次,指令与元素解绑时调用。

    2.过滤器

    过滤器的创建和使用
    -过滤器的本质就是有返回值的函数

    • Vue中支持自定义过滤器,在使用过滤器时支持多重过滤并传参

    {fname | uppercasel}

       

    六、组件属性data、props、computed、methods、watch

    Data

    • Vue 实例的数据对象。Vue将会递归将data的属性转换为getter/setter,从而让data的属性能够响应数据变化。
      -注意:
      不应该对data属性使用箭头函数(例如data:() => { return{ a: this.myProp }3)。理由是箭头函数绑定了父级作用域的上下文,所以this将不会按照期望指向Vue实例,this.myProp将是undefined

    Props

    • props可以是数组或对象,用于接收来自父组件的数据。props可以是简单的数组,或者使用对象作为替代,对象允许配置高级选项,如类型检测、自定义校验和设置默认值 
      Computed
      -计算属性将被混入到Vue 实例中。所有getter 和setter的this 上下文自动地绑定为Vue 实例 

    -注意事项
    不应该使用箭头函数来定义计算属性函数(例如aDouble: ()=> this.a 2)。理由是箭头函数绑定了父级作用域的上下文,所以this将不会按照期呈推口格回Vue 实例, this.a将是undefined。*

    Methods

    • methods将被混入到Vue 实例中。可以直接通过VM实例访问这些方法,或者在指令表达式中使用。方法中的this自动绑定为Vue 实例。

    var vm = new Vue({ 
    data: { a: 1 },

    methods: {

    plus: function ) {

    this.a++}} 
    vm.plus()

    vm.a // 2 

    Watch
    -一个对象,键是需要观察的表达式 ,值是对应回调函数。值也可以是方法名,或者包含选项的对象 。Vue实例将会在实例化时调用$watch(),遍历watch 对象的每一个属性。

    var vm = new Vue({ 
    data: {a: 1,b: 2,c: 3],

    watch: { 
    a: function (val, oldVal) {
    console.log('new: %s, old: %s', val, oldVal)


    vm.a=2//->new: 2, old: 1 

    七、父组件与子组件通信

    组件嵌套

    -组件中可以引入其他的组件

    在Vue.js 中,父子组件的关系可以总结为props down, events up。父组件通过props向下传递数据给子 ,子组件通过events给父组件发送消息

    父与子通信

    -组件实例的作用域是孤立的。这意味着不能(也不应该)在子组件的模板内直接引用父组件的数据。要让子组件使用父组件的数据,我们需要通过子组件的props选项。 -组件实例的作用域是孤立的。这意味着不能(也不应该)在子组件的模板内直接引用父组件的数据.要让子组件使用父组件的数据,我们需要通过子组件的道具选项.
    -子组件要显式地用props选项声明它期待获得的数据 -子组件要显式地用道具选项声明它期待获得的数据

    Vue.component('child', 
    //声明props
    props: ['message'], 
    //就像data 一样,prop可以用在模板内

    template: '{{ message }}'

    })

    父与子通信-1

    -在模板中,要动态地绑定父组件的数据到子模板的props,与绑定到任何普通的HTML特性相类似,就是用v-bind。每当父组件的数据变化时,该变化也会传导给子组件


     

    八、子组件与父组件通信

    子与父通信
    -父组件是使用props传递数据给子组件,但如果子组件要把数据传递回去,应该怎样做?那就是自定义事件! 
    -使用on(eventName)监听事件使用on(eventName)监听事件 -使用emit(eventName)触发事件
    注意事项
    -不能用$on侦听子组件抛出的事件,而必须在模板里直接用v绑定,

    子与父通信-1

    父组件内:给子组件绑定一个eventName的事件

    子组件内:在子组件内触发父组件指定的叫做

    eventName事件
    this.$emit('increment') 

    九、父子通信

    打通父子之间所有数据和方法的共享方法
    ref被用来给元素或子组件注册引用信息。引用信息将会注册在父组件的$refs对象上。如果在普通的DOM元素上使用,引用指向的就是DOM元素;如果用在子组件上,引用就指向组件实例 上,引用就指向组件实例

    -父模板:

    -父访问子:父组件: this.refs.子名称.子数据/方法名() 子访问父:子组件:this.refs.子名称.子数据/方法名()  -子访问父:子组件: this.parent. 子数据/方法名() 

    打通父子之间所有数据和方法的共享方法-1

    -父模板:

    speak:function(){

          console.log("父组件的方法被调用了");

    }

    this.$refs.myChild.study();//调用子组件方法

    子组件:

    this.$parent.speak();//调用父组件方法

    study:function(){

           console.log("子组件方法被调用了");

    }

    十、兄弟通信

    -有时候非父子关系的组件也需要通信。在简单的场景下,使用 元件个空的Vue实例作为事件传输的中介

    var bus = new Vue(); 
    组件a:绑定事件
    bus. on(msgToBrother,function(data)       console.log(data);  组件b:触发事件bus.on**('msg ToBrother', function (data) {             **console.log**(data);  }  组件b:触发事件 bus. **emit('msgToBrother', 'it is a message')