Vue2.5开发去哪儿网App 第四章笔记下

最新推荐文章于 2023-05-20 06:49:55 发布

weixin_30696427

最新推荐文章于 2023-05-20 06:49:55 发布

阅读量124

点赞数

原文链接：http://www.cnblogs.com/donghaoblogs/p/10426155.html

版权

1.解决非父子组件之间的传值问题

非父子组件传值(Bus/总线/发布订阅模式/观察者模式)

给 Vue类上挂在一个属性，然后创建vue实例时，实例就拥有了这个属性

Vue.prototype.bus = new Vue();

//发送

this.bus.$emit('change',this.selfContent);


//监听

this.bus.$on('change',function (value) {
    this_.selfContent = value;
});

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>非父子组件传值(Bus/总线/发布订阅模式/观察者模式)</title>
</head>
<body>
<script src="../../vue.js"></script>
<div id="app">
    <child content="dong"></child>
    <child content="hao"></child>
</div>
<script>
    Vue.prototype.bus = new Vue();

    Vue.component('child',{
        data:function(){
          return {
              selfContent:this.content
          }
        },
        props:{
          content:String,
        },
        template:'<div @click="HandleClick">{{selfContent}}</div>',
        methods:{
            HandleClick:function () {
                this.bus.$emit('change',this.selfContent);
            }
        },
        // #组件被挂载时候执行
        mounted:function () {
            var this_ = this
            this.bus.$on('change',function (value) {
                this_.selfContent = value;
            });
        }
    });
    var vm = new Vue({
        el:"#app"
    })
</script>
</body>
</html>

View Code

2. 插槽

使用：

<child>
    <!--定义插槽-->
    <p>dell</p>
    <p>dell</p>
    <p>dell</p>
</child>

 //slot标签使用插槽

Vue.component('child',{
    props:['content'],
    template:`<div>
                    <p>hello</p>
                    <slot></slot>
               </div>`
})

默认插槽：

<default></default>
Vue.component('default',{
    template:`<div>
                    <slot>我是默认值</slot>
               </div>`
})

具名插槽：

<body-content>
    <!--具名插槽-->
    <div class="header" slot="header">header</div>
    <div class="footer" slot="footer">footer</div>
</body-content>
// #header-footer
// 当不传时，使用默认值
Vue.component("body-content",{
    template:`<div>
                <slot name="header"></slot>
                <div class="content">content</div>
                <slot name="footer"></slot>
                <slot name="default-header">
                    <h1>默认header</h1>
                </slot>
                </div>`
})

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>使用插槽（slot）</title>
    <script src="../../vue.js"></script>
</head>
<div id="app">
    <child>
        <!--插槽-->
        <p>dell</p>
        <p>dell</p>
        <p>dell</p>
    </child>

    <!--#默认值-->
    <default></default>

    <!--// #header-footer-->
    <body-content>
        <!--具名插槽-->
        <div class="header" slot="header">header</div>
        <div class="footer" slot="footer">footer</div>
    </body-content>
</div>
<script>
    Vue.component('child',{
        props:['content'],
        template:`<div>
                        <p>hello</p>
                        <slot></slot>
                   </div>`
    })

    Vue.component('default',{
        template:`<div>
                        <slot>我是默认值</slot>
                   </div>`
    })

    // #header-footer
    // 当不传时，使用默认值
    Vue.component("body-content",{
        template:`<div>
                    <slot name="header"></slot>
                    <div class="content">content</div>
                    <slot name="footer"></slot>
                    <slot name="default-header">
                        <h1>默认header</h1>
                    </slot>
                    </div>`
    })

    var vm =new Vue({
        el:"#app"
    })
</script>
<body>
</body>
</html>

View Code

3. 作用域插槽

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>作用域插槽</title>
    <script src="../../vue.js"></script>
</head>
<body>
<div id="app">
    <child>
        <!--作用域插槽 template-->
        <template slot-scope="props">
            <h1>{{props.item}}</h1>
        </template>
    </child>
    <!--dom结构由外部传递-->
    <!--使用template标签，并且用slot-scope接收-->
</div>
<script>
    Vue.component('child',{
        data:function(){
          return {
              list:[1,2,3,4,5,6]
          }
        },
      // :item="item"子组件向父组件中传递数据
        template:`<div>
                    <ul>
                        <slot v-for="item in list" :item="item">
                        </slot>
                    </ul>
                    </div>`
    })
    var vm = new Vue({
        el:"#app"
    })
</script>
</body>
</html>

View Code

4.动态组件和v-once指令

使用component标签动态显示组件

<component :is="type"></component>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>动态组件和v-once指令</title>
    <script src="../../vue.js"></script>
</head>
<body>
<div id="app">
    <!--<child-one v-if="type==='child-one'"></child-one>-->
    <!--<child-two v-if="type==='child-two'"></child-two>-->

    <component :is="type"></component>
    <!--耗费性能，重复销毁  创建-->
    <!--v-once直接放到内存里-->
    <button @click="handleBtnclick">click me</button>
</div>

<script>
    Vue.component('child-one',{
        template:`<div v-once>this is child one</div>`
    })

    Vue.component('child-two',{
        template:`<div v-once>this is child two</div>`

    })
    var vm = new Vue({
        el:"#app",
        data:{
            type:'child-one'
        },
        methods:{
            handleBtnclick:function () {
                this.type = this.type==='child-one'?'child-two':'child-one'
            }
        }
    })
</script>
</body>
</html>