父组件向子组件传值
这是最开始的代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Hello World</title>
<script src="vue.js" type="text/javascript" charset="utf-8"></script>
<script src="jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
<input type="" name="" v-model="inputvalue">
<button type="" v-on:click="handleItemSubmit">提交</button>
<ul>
<todo-item v-for="item in list"
v-bind:content="item">
</todo-item>
</ul>
</div>
<script>
var TodoItem = {
props : ["content"],
template : "<li>{{content}}</li>"
}
var app = new Vue({
el : "#app",
data : {
list : [],
inputvalue : ""
},
components : {
TodoItem : TodoItem
},
methods : {
handleItemSubmit : function () {
this.list.push(this.inputvalue);
this.inputvalue = "";
}
}
});
</script>
</body>
</html>
父组件中data的数据,通过v-for和v-bind传递给了子组件
现在子组件向父组件传值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Hello World</title>
<script src="vue.js" type="text/javascript" charset="utf-8"></script>
<script src="jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
<input type="" name="" v-model="inputvalue">
<button type="" v-on:click="handleItemSubmit">提交</button>
<ul>
<todo-item v-for="(item, index) in list"
v-bind:content="item"
v-bind:index="index"
v-on:delete="handleItemDelete">
</todo-item>
</ul>
</div>
<script>
var TodoItem = {
props : ["content", "index"],
template : "<li v-on:click='handleItemClick'>{{content}}</li>",
methods : {
handleItemClick : function () {
this.$emit("delete", this.index);
}
}
}
var app = new Vue({
el : "#app",
data : {
list : [],
inputvalue : ""
},
components : {
TodoItem : TodoItem
},
methods : {
handleItemSubmit : function () {
this.list.push(this.inputvalue);
this.inputvalue = "";
},
handleItemDelete : function (index) {
this.list.splice(index, 1);
}
}
});
</script>
</body>
</html>
要想要传值给父组件,首先需要在子组件template模板中,加一个handleItemClick函数,再在子组件对象中的methods添加handleItemClick函数,调用this.$emit("delete", this.index),前面用来监听父组件的函数,后面是传递给父组件函数的值
-------------------------------------------------------------------------------------------------------------------------
:count="1"
如果不加冒号,count里面就是一个字符串,而一旦加了冒号,就会被处理成表达式,就变成数字了
那么,我现在想要实现一个点击数字,数字就能够自己加1
如下:
点击之后是能够加上的
但是Vue会返回一个警告,原因在于如果是父组件count变化了,然后再传给子组件,那么是没有任何问题的,但是对于子组件来说,接受到父组件传过来的内容,只能去使用它,却不能改变它,就是一个单项数据流的意思,
之所以有这个单项数据流是因为如果父组件传过来的是一个引用值,那么其中一个子组件改变了其内容,如果有其他子组件也引用了这个数据,这就对其他子组件造成了影响
那么我们现在这个功能怎么实现呢?其实也简单,只要将this.count保存到自己得data中,然后对自己的data进行操作就可以了
这样就能实现相加,而且控制台不报错
那么现在实现将两个数字相加
子组件通过emit事件触发的形式,来向父组件传值;
父组件通过属性传递的方式,来向子组件传值,但是子组件不能改变父组件传递过来的值,如果非要修改,就复制一个副本,再进行改变