1. 监听子组件事件

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>About Component</title>
        <script src="vue.js" type="text/javascript" charset="utf-8"></script>
    </head>
    <body>
        <div id="app">
            <div v-bind:style="{fontSize:newsFontSize+'px'}">
                Hello Component!<br/>
                <news-show v-for="item in news" v-bind:newsprops="item" v-on:zoom-in-text="newsFontSize+=1"></news-show>
            </div>
        </div>    
        <script type="text/javascript">
            Vue.component("news-show",{
                template:`<p>
                          <span>TITLE:{{newsprops.title}}</span> 
                          <span>CONTENT:{{newsprops.content}}</span> 
                          <span>TIME:{{newsprops.time}}</span> 
                          <button v-on:click="$emit(\'zoom-in-text\')">放大文字</button>
                          </p>`,
                props:["newsprops"]
            });
            var vm = new Vue({
                el:app,
                data:{
                    news:[
                        {title:"标题1",content:"内容1",time:"2020-01-01"},
                        {title:"标题2",content:"内容2",time:"2020-01-02"},
                        {title:"标题3",content:"内容3",time:"2020-01-03"},
                        ],
                    newsFontSize:20
                }
            });
        </script>
    </body>
</html>

以上代码理解方式如下:
file

2. 使用事件抛出一个值

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>About Component</title>
        <script src="vue.js" type="text/javascript" charset="utf-8"></script>
    </head>
    <body>
        <div id="app">
            <div v-bind:style="{fontSize:newsFontSize+'px'}">
                Hello Component!<br/>
                <news-show v-for="item in news" v-bind:newsprops="item" v-on:zoom-in-text="newsFontSize+=$event"></news-show>
            </div>
        </div>    
        <script type="text/javascript">
            Vue.component("news-show",{
                template:`<p>
                          <span>TITLE:{{newsprops.title}}</span> 
                          <span>CONTENT:{{newsprops.content}}</span> 
                          <span>TIME:{{newsprops.time}}</span> 
                          <button v-on:click="$emit('zoom-in-text',5)">放大文字</button>
                          </p>`,
                props:["newsprops"]
            });
            var vm = new Vue({
                el:app,
                data:{
                    news:[
                        {title:"标题1",content:"内容1",time:"2020-01-01"},
                        {title:"标题2",content:"内容2",time:"2020-01-02"},
                        {title:"标题3",content:"内容3",time:"2020-01-03"},
                        ],
                    newsFontSize:20
                }
            });
        </script>
    </body>
</html>

以上代码理解方式如下:

file

3. 组件的插槽功能

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>About Component</title>
        <script src="vue.js" type="text/javascript" charset="utf-8"></script>
    </head>
    <body>
        <div id="app">
            <div v-bind:style="{fontSize:newsFontSize+'px'}">
                Hello Component!<br/>
                <news-show v-for="item in news" v-bind:newsprops="item" v-on:zoom-in-text="newsFontSize+=$event">插槽内容,哈哈哈!</news-show>
            </div>
        </div>    
        <script type="text/javascript">
            Vue.component("news-show",{
                template:`<p>
                          <span>TITLE:{{newsprops.title}}</span> 
                          <span>CONTENT:{{newsprops.content}}</span> 
                          <slot></slot>
                          <span>TIME:{{newsprops.time}}</span> 
                          <button v-on:click="$emit('zoom-in-text',5)">放大文字</button>
                          </p>`,
                props:["newsprops"]
            });
            var vm = new Vue({
                el:app,
                data:{
                    news:[
                        {title:"标题1",content:"内容1",time:"2020-01-01"},
                        {title:"标题2",content:"内容2",time:"2020-01-02"},
                        {title:"标题3",content:"内容3",time:"2020-01-03"},
                        ],
                    newsFontSize:20
                }
            });
        </script>
    </body>
</html>

以上内容的重点如下:
file

发表评论

电子邮件地址不会被公开。 必填项已用*标注