有关vue （父子组件传值）

模板 挂载点 实例
v-html v-text {{}} 插值表达式
v-on:click=" " v-on(“@”) 绑定事件
v-bind:title=" " v-bind(“：”) 属性绑定
v-model = " " (双向数据绑定)
计算属性 computed：
侦听器 watch:
v-if(把标签去除)
v-show(display:none)
v-for=“item of list”
每个vue组件都是实例

父组件向子组件传值与子组件向父组件传值的实例：

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="./vue.js"></script>
</head>
<body>
<div id="root">
    <input v-model="msg"/>
    <button @click="xianshi">提交</button>
    <ul >
        <!--<li>{{item}}</li>-->
        <h-item v-for="(item,index) of list"
                :key="index"
                :content="item"
                :index = "index"
                @delete="fdelete"
        ></h-item>
    </ul>
</div>

<script>

    Vue.component('h-item',{
        props:['content','index'],
        template:" <li @click='shanchu'>{{content}}</li>",
        methods:{
            shanchu:function(){
                this.$emit('delete',this.index);
                // console.log(this.index);
            }
        }
    })
    new Vue({
        el:"#root",
        data:{
           msg:'',
            list:[]
        },
        methods:{
            xianshi:function(){
               this.list.push(this.msg);
               this.msg='';
            },
            fdelete: function(index){
                this.list.splice(index,1);
                console.log(index);
            }
        }
    })

</script>
</body>
</html>
posted @ 2019-04-27 19:54  princeness  阅读(121)  评论(0)  编辑  收藏  举报