Vue学习笔记八

子组件向父组件传值，利用自定义事件

<div id="app">
        <p>{{total}}</p>
        //定义一个事件increment,定义一个方法getResult，increment事件触发时，执行getResult方法
        <child @increment="getResult"></child>
        <child @increment="getResult"></child>
    </div>
    <script type="text/javascript">
        var child = {
            //使用系统点击事件，执行add方法
            template: "<p><button @click='add'>{{number}}</button></p>",
            data: function(){
                return {
                    number: 0
                }
            },
            methods: {
                add: function(){
                    this.number += 1
                    //触犯increment事件，和node中的相似
                    this.$emit('increment')
                }
            }
        }
        var app = new Vue({
            el: "#app",
            data: {
                total: 0,
            },
            methods: {
                //当子组件触发了increment事件的时候，该方法得到执行
                getResult: function(){
                    this.total += 1
                }
            },
            components: {
                'child': child,
            }
        })
    </script>

单个slot

为了让组件可以组合，我们需要一种方式来混合父组件的内容与子组件自己的模板。这个过程被称为内容分发
除非子组件模板包含至少一个 插口，否则父组件的内容将会被丢弃。当子组件模板只有一个没有属性的 slot 时，父组件整个内容片段将插入到 slot 所在的 DOM 位置，并替换掉 slot 标签本身。
下面的代码表叔会消失

<div id="app">
        <h1>父亲</h1>
        <child>
            <p>表叔</p>
        </child>
    </div>
    <script type="text/javascript">
        var child = {
            template: "<div><h2>儿子</h2></div>",
        }
        var app = new Vue({
            el: "#app",
            components: {
                'child': child,
            }
        })
    </script>

下面代码表叔会出现

<div id="app">
        <h1>父亲</h1>
        <child>
            <p>表叔</p>
        </child>
    </div>
    <script type="text/javascript">
        var child = {
            template: "<div><h2>儿子</h2><slot>表叔出现，我消失，表叔消失，我出现</slot></div>",
        }
        var app = new Vue({
            el: "#app",
            components: {
                'child': child,
            }
        })
    </script>

slot的name属性

下面只会出现父亲header和儿子footer内容

<div id="app">
<layout>
        <h1 slot="header">父亲header</h1>
        <p slot="footer">父亲footer</p>
    </layout>
</div>
<script type="text/javascript">
    var layout = {
        template: "<div><header><slot name='header'></slot></header><footer>儿子footer</footer></div>",
    }
    var app = new Vue({
        el: "#app",
        components: {
            'layout': layout,
        }
    })
</script>