Vue-propsとthis.emit()

10118 ワード
Vue
  • vueコンポーネントのprops:propsは、vueコンポーネントがvueインスタンスのdataドメインのデータを取得することを可能にする(バインドによって)
    • .
  • this.$Emit()は、vueコンポーネント内の関数がvueインスタンス内の関数を指すことを許可し、実行することを許可する(イベントの宣言はバインドが必要である)
    • <!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--       ，             -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        <todo>
            <todo-title slot="todo-title" :ctitle="title"></todo-title>
            <todo-items slot="todo-items" v-for="(item,index) in items" :citem="item" @remove="removeItem(index)"></todo-items>
        </todo>
    </div>

    <script>
        Vue.component("todo", {
            template:
                '
    ' +
                    '' +
                    '
      '
     +
                        '' +
                    '' +
                '
    '    
        });

        Vue.component("todo-title", {
            props: ['ctitle'],
            template: '
    {{ctitle}}
    '    
        });

        Vue.component("todo-items", {
           props: ['citem'],//props       vue    data    ，   vue   vue  
           template: '
  • {{citem}} 
    • '    ,
           methods: {
               cremove: function (index) {
                   //this.$emit()        vue      ，   vue   vue  
                   this.$emit("remove", index);//   remove            ，   vue    removeItem  
               }
           }
        });

        var vm = new Vue({
           el: '#app',
           data: {
               title: '  ',
               items: ['  ', '  ']
           },
           methods: {
               removeItem: function(index) {
                   this.items.splice(index);
               }
           }
        });
    </script>
</body>
</html>
    Laravel5.4 ファイル複数ダウンロード(画像でもテキストでも)
    vueでのルーティングジャンプ、パラメータの携帯と取得