Vue component组件传值-原创手记-慕课网

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>component组件传值</title>
<script src="http://www.jiaodong.net/js/Vue2.5.16.js"></script>
</head>
<body>
<div id="millia">
    <input type="text" v-model="int">
    <button @click="sub">提交</button>
    <ul>
        <item-list @delist="delthis" :itemtxt="list" :xx="index" v-for="(list, index) in lists"></item-list>
    </ul>
</div>
<script>
var itemList = {
    props: ["itemtxt","xx"],
    template: "<li @click='myclick'>{{itemtxt}}</li>",
    methods: {
        myclick: function(){
            this.$emit("delist",this.xx);
        }
    }
}
var vm = new Vue ({
    el: "#millia",
    components: {
        "item-list" : itemList,
    },
    data: {
        int: "",
        lists: []
    },
    methods: {
        sub: function(){
            this.lists.push(this.int);
            this.int = "";
        },
        delthis: function(xx){
            // alert(xx);
            this.lists.splice(x,1);
        }
    }
})
</script>
</body>
</html>

知识点

父组件 -> 子组件　父组件通过 props 向子组件传递数据

子组件 -> 父组件　子组件通过事件向父级组件发送消息，需使用this.$emit("function",pram);其中function为父组件函数(必须)，pram为需要传递参数(可选)

在父组件中子组件引用处，使用函数 v-on:function="function1" //其中function为子组件中使用函数，function1为父组件赋值函数

列表渲染 v-for

v-for 指令需要使用 item in items 形式的特殊语法，items 是数组或对象名 item 是数组或对象迭代的别名。

当“items”为数组时，v-for 支持一个可选的第二个参数为当前项的索引。例：

　　　　{{ parentMessage }} - {{ index }} - {{ item.message }}

　　</li>

</ul>

当“items”为对象时，v-for 支持第二个的参数为键名，第三个参数为索引。例：

　　{{ index }}. {{ key }}: {{ value }}

</div>

数组更新检测的变异方法

push()方法

push() 方法可向数组的末尾添加一个或多个元素，并返回新的长度。

语法：arrayObject.push(newelement1,newelement2,....,newelementX)

newelement1 必需。要添加到数组的第一个元素。

newelement2 可选。要添加到数组的第二个元素。

newelementX 可选。可添加多个元素。

说明：push() 方法可把它的参数顺序添加到 arrayObject 的尾部。它直接修改 arrayObject，而不是创建一个新的数组。push() 方法和 pop() 方法使用数组提供的先进后出栈的功能。

pop()方法

pop() 方法用于删除并返回数组的最后一个元素。

语法：arrayObject.pop()

说明：pop() 方法将删除 arrayObject 的最后一个元素，把数组长度减 1，并且返回它删除的元素的值。如果数组已经为空，则 pop() 不改变数组，并返回 undefined 值。

shift()方法

shift() 方法用于把数组的第一个元素从其中删除，并返回第一个元素的值。

语法：arrayObject.shift()

说明：如果数组是空的，那么 shift() 方法将不进行任何操作，返回 undefined 值。请注意，该方法不创建新数组，而是直接修改原有的 arrayObject。

unshift()方法

unshift() 方法可向数组的开头添加一个或更多元素，并返回新的长度。

语法：arrayObject.unshift(newelement1,newelement2,....,newelementX)

newelement1 必需。向数组添加的第一个元素。

newelement2 可选。向数组添加的第二个元素。

newelementX 可选。可添加若干个元素。

说明：unshift() 方法将把它的参数插入 arrayObject 的头部，并将已经存在的元素顺次地移到较高的下标处，以便留出空间。该方法的第一个参数将成为数组的新元素 0，如果还有第二个参数，它将成为新的元素 1，以此类推。

请注意，unshift() 方法不创建新的创建，而是直接修改原有的数组。

splice()方法

splice() 方法用于插入、删除或替换数组的元素。

语法：arrayObject.splice(index,howmany,item1,.....,itemX)

index 必需。整数，规定添加/删除项目的位置，使用负数可从数组结尾处规定位置。

howmany 必需。要删除的项目数量。如果设置为 0，则不会删除项目。

item1, ..., itemX 可选。向数组添加的新项目。

说明：splice() 方法可删除从 index 处开始的零个或多个元素，并且用参数列表中声明的一个或多个值来替换那些被删除的元素。

如果从 arrayObject 中删除了元素，则返回的是含有被删除的元素的数组。

sort()方法

sort() 方法用于对数组的元素进行排序。

语法：arrayObject.sort(sortby)

sortby 可选。规定排序顺序。必须是函数。

说明：如果调用该方法时没有使用参数，将按字母顺序对数组中的元素进行排序，说得更精确点，是按照字符编码的顺序进行排序。要实现这一点，首先应把数组的元素都转换成字符串（如有必要），以便进行比较。

如果想按照其他标准进行排序，就需要提供比较函数，该函数要比较两个值，然后返回一个用于说明这两个值的相对顺序的数字。比较函数应该具有两个参数 a 和 b，其返回值如下：

若 a 小于 b，在排序后的数组中 a 应该出现在 b 之前，则返回一个小于 0 的值。

若 a 等于 b，则返回 0。

若 a 大于 b，则返回一个大于 0 的值。

reverse()方法

reverse() 方法用于颠倒数组中元素的顺序。

语法：arrayObject.reverse()

说明：该方法会改变原来的数组，而不会创建新的数组。