您的位置：首页 > Web前端 > Vue.js

VUE父子组件以及传值的问题。

2020-02-03 04:11 423 查看

最近学习这个组件，很是头晕，分不清楚谁是父组件，谁是子组件。网上例子一大堆，基本上都没有具体说清楚谁是父组件，谁是子组件。但是我还是想记录一下我这两天的思考。如果你非要问我什么是父组件，什么是子组件，我头脑里大概是这么想的：你用上一个东西的数据，那么上一个东西就是父组件，当前的就是子组件。不说这个问题了，待会上代码，慢慢体会。
父组件通过V-bind向子组件传值，子组件通过props接受父组件传递过来的值，然后通过template来显示出来。
子组件通过触发一个件，用$emit（“事件名”，参数）触发一个事件，父组件用v-on来监听子组件向外触发的事件，并且接收子组件传来的参数。
我们还是继续引用上个例子。在输入框输入东西，然后点击旁边的button，然后页面显示刚才我们输入的东西。然后我们随便点击页面上我们刚才输入的一项东西后，他就消失了。在昨天的代码的基础上我们只需要再增加一个点击事件就可以了。我们用组件来书写昨天的li标签。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>V</title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<div id="app">
<input type="text"  v-model="inputValue" />
<button v-on:click="BtnClick" >click me</button>

<ul>
<todo-item v-bind:content="item" v-bind:index="index" v-for="(item,index) in list" v-on:delete="handleBtnDelete"></todo-item>
</ul>
</div>

<script>
var TodoItem = {
props:["content","index"],
template:"<li v-on:click=handleBtnClick >{{content}}</li>",
methods:{
handleBtnClick:function(){
this.$emit("delete",this.index)
}

}
}
var app = new Vue({
el: "#app",
components: {
TodoItem:TodoItem
},
data: {
list:[],
inputValue:""

},
methods:{
BtnClick:function(){
this.list.push(this.inputValue)
},
handleBtnDelete:function(index){
this.list.splice(index,1)
}
}

})
</script>
</body>
</html>

对于这个代码我还是想再赘述几句，父组件给子组件传递值的时候是通过在todo-item里面的v-bind绑定并且传值给子组件，子组件通过props接受值，然后值通过模板标签li显示出来。li标签上面需要绑定一个click事件，然后这个事件向外触发一个delete事件，然后父组件接收delete事件，并且用handleBtnDelete函数来响应delete事件，因为是父组件监听这个delete事件，所以我们的handleBtnDelete函数应该放在Vue这个父组件里面。
顺便补充另外一个小东西，那就是MVVP，我们都知道VUE就是一种MVVM模型的框架。M层就是我们说的数据层，我们上面用VUE语法写的那坨script代码就是我们所说的M层，V层就是我们说的视图层，VM就是VUE干的工作了，我们初学者目前可以不管VM层，如果大家有兴趣，以后会补充这个VM层。
由于是初学VUE，哪里讲错的地方，还请大家评论指正。

  • 点赞
  • 收藏
  • 分享
  • 文章举报
su_jump 发布了9 篇原创文章 · 获赞 1 · 访问量 315 私信 关注
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航