你当前的位子: 首页 >> 学无止境 >> vue

vue子组件传递 & 父组件传递案例

发布时间:2018-04-12 编辑:admin阅读(112)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
    <title>Document</title>
</head>
<body>
    <div id="root">
        <input type="text" v-model="inpfruit" id="">
        <input type="button" @click="tj" value="提交" >
        <ul>
            <todolist v-for="(item,index) in fruit" @delli='delZi' :key='index' :content='item' :index='index' ></todolist>
        </ul>
    </div>

    <script>
        Vue.component('todolist',
        {
            props:['content','index'],
            template: '<li @click="handleClick" >{{index}}-{{content}}</li>',
            methods:{
                handleClick(){
                    this.$emit('delli',this.index)
                    // alert(this.index);
                }
            }
         })

        var vm = new Vue({
            el: '#root',
            data: {
                fruit:['桃子'],
                inpfruit:''
            },
            methods:{
                tj(){
                    this.fruit.push(this.inpfruit);
                    this.inpfruit = ''
                },
                delZi(index){
                    // alert(111);
                    this.fruit.splice(index,1);
                }
            }
        })
    </script>
</body>
</html>

image.png

关键字:魏新明,魏新明个人博客,web全栈

上一页:没有了!

下一页:如何创建一个vue cli项目 从nodejs开始安装