Vue学习笔记八

忘是亡心i 2022-06-09 11:40 179阅读 0赞

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

<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>