Page.prototype-$emit()

最新推荐文章于 2020-11-20 08:53:35 发布

费小存

最新推荐文章于 2020-11-20 08:53:35 发布

阅读量702

点赞数

分类专栏： vue

本文链接：https://blog.csdn.net/F1594952/article/details/80482831

版权

vue 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

Page.prototype

function Page(){}
$.extend(Page.prototype,{
    init: function(){
        this.bindEvents()
    },
    bindEvents: function(){
        var btn = $('#btn');
        btn.click(function(){console.log('111')})
    }
})
var page = new Page();
page.init();

$emit() 子组件向父组件传值

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>

<body>
    <div id="app">
        <input type="text" v-model="inputValue">
        <a href="javascript:;" @click="handlerBtn">提交</a>
        <ul>
            <todo-item v-bind:content="item" v-bind:index="index" v-on:delete="deleteFunc" v-for="(item,index) in inputList"></todo-item>
        </ul>
    </div>
    <script>
    Vue.component('TodoItem', {
        props: ['content', 'index'],
        template: '<li @click="liClick">{{content}}</li>',
        methods: {
            liClick: function() {
                this.$emit('delete', this.index)
            }
        }
    })
    var app = new Vue({
        el: '#app',
        data: {
            inputValue: '',
            inputList: []
        },
        methods: {
            handlerBtn: function() {
                this.inputList.push(this.inputValue)
                this.inputValue = '';
            },
            deleteFunc: function(index) {
                this.inputList.splice(index, 1)
            }
        }
    })
    </script>
</body>

</html>

费小存

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Page.prototype-$emit()

Page.prototypefunction Page(){}$.extend(Page.prototype,{ init: function(){ this.bindEvents() }, bindEvents: function(){ var btn = $('#btn'); btn.click(function...
复制链接

扫一扫