-
- 小橘多多 2024-07-02
todolist的删除功能
在vue中，父组件向子组件传值是通过属性的形式进行值的传递
子组件数据的删除，要从父组件里把渲染子组件的数据删除，子组件才不会显示
实现子组件和父组件的通信模式---发布订阅模式
：index="index" 循环的下标
props：["content","index"] 意味着子组件可以从父组件接收到content和index下标两个属性
当子组件被点击时，需要通知父组件对子组件数据进行删除
this.$emit('delete', this.index) 触发delete自定义事件
$emit向外触发了事件，子组件向外部进行了发布，
传递组件index的值，this.index获取当前组件的下标值
父组件在模版创建子组件的时候监听子组件向外触发delete事件，
父组件监听到子组件delete事件后，执行一个handleDelete函数
在父组件Vue实例methods中写handleDelete方法，alert（‘delete’）
父组件可以接受到子组件传过来的下标参数
将父组件里面list对应下标的内容删除
this.list.splice(index,1) 删除对应下标内容的一项
- 0赞 · 0采集
-
- Heracles 2023-05-17
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>TodoList</title>
<script src="./vue.js"></script>
</head>
<body>
<div id="root">
<div>
<input v-model="inputValue" />
<button @click="handleSubmit">提交</button>
</div>
<ul>
<todo-item
v-for="(item, index) of list"
:key="index"
:content="item"
:index="index"
@delete="handleDelete"
>
</todo-item>
</ul>
</div>
<script>
Vue.component('todo-item', {
props: ['content', 'index'],
template: '<li @click="handleClick">{{content}}</li>',
methods: {
handleClick: function() {
this.$emit('delete', 'index');
}
}
})
new Vue({
el:"#root",
data: {
inputValue: '',
list: []
},
methods: {
handleSubmit: function() {
this.list.push(this.inputValue)
this.inputValue = ''
},
handleDelete: function(index) {
this.list.splice(index, 1);
}
}
})
</script>
</body>
</html>
- 0赞 · 0采集
-
- AppMan 2023-03-06
父组件定义的模板，模板会显示父组件list的数据
创建子组件todo-item，传递名为content和index参数对应item,index的值。
子组件props声明传递的参数，
当点击的时候handleClick，this.$emit会向外触发一个名为'delete'的事件，事件的值为this.index，
父组件创建子组件的时候@delete监听该事件，当触发delete事件的时候会触发父组件handleDelete方法。
- 0赞 · 0采集
-
- 月朦胧 2023-02-22
this.$emit('delete',this.index)
- 0赞 · 0采集
-
- 敲神马代码 2023-02-20
<!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">
<title>todolist</title>
<script src="../vue.js"></script>
</head>
<body>
<div id="root">
<div>
<input v-model="inputValue" />
<button @click="handleSubmit">提交</button>
</div>
<ul>
<!-- <li v-for="(item,index) of list" :key="index">
{{item}}
</li> -->
<todo-item
v-for="(item,index) of list"
:key="index"
:content="item"
:index="index"
@delete="handleDelete">
</todo-item>
</ul>
</div>
<script>
// 组件的拆分
// 我们可以把一个较大的项目拆分成一个个小的组件，这样维护起来就比较方便了
// vue组件的定义，这里说道两种：
// 全局组件：vue提供了vue.component()来定义组件，第一个参数是组件的名字，也是我们将要写在dom里的标签，第二个参数是一个对象，里面可以定义一个模板，也是我们要显示的内容。
// 还有一种方式叫做局部组件，在外面定义一个对象，对象里面装着模板，但是这样还不可直接使用，我们需要在实例里面进行注册，配置标签名和内容。意思就是在我这个vue实例里面去使用这个组件。
// 在标签内可以像以往一样正常使用指令。
// 要想显示我们想显示的内容，我们可以进行传参，在标签里面定义属性，属性就是我们想要显示的内容然后在组件里面用props(固定)给接收过来就可以正常使用了。
/* 组件和实例的关系
每一个组件也是一个vue的实例。
在template中双引号可以在里面嵌套单引号，单引号不能嵌套单引号，会出现一些问题。
每一个项目都是由很多个组件组成的，也就是很多个vue实例组成的，因为每个组件就是vue实例，所以在组件中可以正常使用vue的一些方法，比如methods,watch等等。
每个组件都拥有自己的props、data、methods等等
注意：如果我们没有在vue根实例?下面定义模板，我们会按照挂载点寻找，并把下面的模板当作是模板。
*/
// 全局组件
Vue.component('todo-item',{
props:['content','index'],
template:'<li @click="handleClick">{{content}}{{index}}</li>',
methods:{
handleClick:function(){
this.$emit('delete',this.index)
}
}
})
// 局部组件
// var TodoItem = {
// template: '<li>item</li>'
// }
// 删除功能
/* 父组件和子组件通信：属性形式
父组件中通过属性向子组件传递值，子组件接受属性的内容并再子组件上进行内容显示
子组件可以绑定事件，实现子组件的删除必须删除父组件的相关数据，
子组件和父组件通信：发布订阅模式
子组件被点击需要通知父组件把数据删除，
传递一个$emit，触发一个自定义事件，传递一个值，
父组件在模板里可以监听子组件向外传递的出发的delete事件，如果父组件监听到子组件的事件，
执行delete事件 */
new Vue({
el: '#root',
// Components: {//实例中配置这个才能使用局部组件
// 'todo-item': TodoItem
// },
data: {
inputValue: '',//初始值为空
list: []
},
methods: {
handleSubmit: function () {
this.list.push(this.inputValue)
this.inputValue = ''
},
handleDelete:function(index){
this.list.splice(index,1)
}
}
})
</script>
</body>
</html>
- 0赞 · 0采集
-
- 慕粉1472668921 2022-12-06
子给父组件靠发布订阅
父给子靠参数
- 0赞 · 0采集
-
- 披星戴月的想你 2022-12-05
父组件向子组件通信： 通过属性形式
1、父组件通过属性的形式向子组件传递参数，子组件中使用props来接收父组件传递过来的属性参数，并在自己的模板中使用
2、子组件可以绑定事件，通过事件触发向父组件传递参数
子组件向父组件通信：通过发布订阅模式
1、在子组件的方法中通过$emit向父组件抛出触发事件名称（delete）和触发事件的参数（index）
2、父组件通过监听子组件抛出的事件而触发自己的事件（inputDelete）
...
<todo-item v-for="(item,index) of list" :key="index" :value="item" :index="index" @delete="inputDelete"></todo-item>
...
<script>
Vue.component('todo-item',{
props: ['value','index'],
template: "<li @click='deleteClick'>{{value}}</li>",
methods:{
deleteClick: function(){
this.$emit("delete",this.index)
}
}
})
new Vue({
...
methods:{
...
inputDelete: function(index){
this.list.splice(index,1)
}
},
...
})
</script>- 0赞 · 1采集
-
- 沙澧情缘 2022-11-26
父子传值
- 0赞 · 0采集
-
- 沙澧情缘 2022-11-26
父传子 通过 属性的方式传递 如：
:content="item"
:index="index"
子组件通过 propos:['content','index'], 接收父组件的传值
- 0赞 · 0采集
-
- weixin_慕田峪2421802 2021-11-17
w
- 0赞 · 0采集
-
- 木林森丿 2021-08-27
实现子组件与父组件的通信：用this.$emit(),触发一个自定义的事件。并在挂载点里面声明次事件，并接受参数_下标，在运用 .splice()删除标签。
父组件向子组件传递参数：通过属性的方式传递
子组件向父组件传递参数：通过.$emit()发布自定义事件模式，且父组件提前就定义了这个事件。
- 0赞 · 0采集
-
- xflyhack 2021-08-20
父组件向子组件传值是通过属性的形式传递的。
子组件想要删除 一定是在父组件里面删除 子组件向父组件通信 发布订阅的模式；
- 0赞 · 0采集
-
- mr木兮 2021-06-29
还不错哦
- 0赞 · 0采集
-
- weixin_慕用6334942 2021-05-20
父组件向子组件传值，通过属性的方式
子组件向父组件传值，通过发布订阅模式
- 0赞 · 0采集
-
- qq_慕仰1307754 2021-04-01
子组件 Vue.component和父组件todo-item传递通过发布订阅模式
监听子组件delete事件，监听到了进行handledelete函数<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="./vue.js" type="text/javascript"></script>
</head>
<body>
<div id='root'>
<input v-model="inputvalue"/>
<button @click="handlesubmit">提交</button>
<ul>
<todo-item v-for="(item,index) of list"
:key="index"
:content="item"
:index="index"
@delete="handledelect"
>
</todo-item>
</ul>
</div>
<script>
Vue.component("todo-item",{
props: ['content','index'],
template: '<li @click="handleclick">{{content}}</li> ',
methods:{
handleclick:function(){
this.$emit('delete',this.index)
}
}
})
new Vue({
el:"#root",
data :{
inputvalue:'',
list:[]
},
methods:{
handlesubmit: function(){
this.list.push(this.inputvalue)
this.inputvalue=''
},
handledelect: function(index) {
this.list.splice(index,1)
}
}
})
</Script>
</body>
</html>
- 0赞 · 0采集
-
- 二条_ 2021-03-23
<div id="root"> <div> <input v-model="inputValue"/> <button @click="handleSubmit">提交</button> </div> <ul> <todo-item v-for="(item,index) of list" :key="index" :content="item" :index="index" @delete="handleDelete" > </todo-item> </ul> </div> <script> //全局组件 Vue.component('todo-item',{ props:['content','index'], template:'<li @click="handleClick">{{content}}</li>', methods:{ handleClick:function(){ this.$emit('delete',this.index) } } }) new Vue({ el:"#root", data:{ inputValue:'', list:[] }, methods:{ handleSubmit:function(){ this.list.push(this.inputValue) this.inputValue='' }, handleDelete:function(index){ this.list.splice(index,1) } } }) </script>定义在父模板里的方法，就是在父组件里面执行的。
父组件通过属性的形式向子组件传递数据；子组件通过发布事件，父组件订阅事件，来实现子组件向父组件传递数据。
- 0赞 · 0采集
-
- 程序猿404 2021-01-07
- 很清晰 就是晚上也太卡了
-
截图0赞 · 0采集
-
- 夜听风雨声 2020-11-06
父子组件传值
- 0赞 · 0采集
-
- 农民工024 2020-08-14
子组件操作父组件的数据
通过v-on:属性名=“父组件的方法名”的形式，并且在子组件的事件里，用
this.$emit('属性名',参数)的形式来调用。
-
截图0赞 · 0采集
-
- qq_宸子_04228031 2020-08-02
在vue中，父组件向子组件传值是通过组件的形式
- 0赞 · 1采集
-
- 飞鱼非鱼 2020-06-29
父组件向子组件传递参数 通过属性的方式
子组件向父组件传递数据，通过发布订阅的模式
子组件： $emit('envenname',props)
父组件： @eventname('eventhanlder')
- 0赞 · 0采集
-
- qq_星语心愿_flstMO 2020-06-25
父组件向子组件传值用属性，父组件 : XXX = "YYY"，子组件 props: ['YYY'];
子组件向父组件传值用$emit('ZZZ')，父组件监听事件@ZZZ="AAA"，并定义AAA。
-
截图0赞 · 0采集
-
- android小白666 2020-06-22
父组件像子组件传值使用定义属性的方式，子组件向父组件传值使用发布订阅的方式。
- 0赞 · 0采集
-
- 慕丝7437234 2020-06-22
实现todolist的删除功能：
<div id="root">
<div>
<input v-model="inputValue"/>
<button @click="handleClick">提交</button>
<ul>
<todo-item
v-for="(item,index) of list"
:key="index"
:msg="item"//父组件通过属性传值给子组件
:index="index"//传参，数据下标值
@delete="handleDelete"//订阅delete方法(监听delete方法)，触发时执行父组件handleDelete方法
></todo-item>
</ul>
</div>
</div>
实例：
var TODOITEM = {//每个组件都是一个实例
props:['msg','index'],//接收参数
template:"<li @click='handleClick'>{{msg}}</li>",//使用参数
methods:{
handleClick:function(){
this.$emit('delete',this.index)//发布delete方法，通知父组件删除本实例，传参：本实例在父组件的下标值
}
}
}
new Vue({
el:"#root",
components:{//局部组件需要先在实例注册才能在实例中使用
"todo-item":TODOITEM
},
data:{
inputValue:'',
list:[]
},
methods:{
handleClick:function(){
this.list.push(this.inputValue)
this.inputValue = ''
},
handleDelete:function(index){//父组件删除子组件想删除的数据
this.list.splice(index,1)
}
}
})
- 0赞 · 1采集
-
- poppowerlb2 2020-06-16
父组件模板里的方法指的是父组件里的方法，子组件模板里的方法指的是子组件里的方法。
父组件：new Vue(...)，父组件的模板(template)：div#app里的所有DOM标签
子组件：Vue.component(...)，子组件的模板(template)：Vue.component('todo-item', {template: '...'})中的template属性
-
截图1赞 · 0采集
-
- poppowerlb2 2020-06-16
子组件向外部进行一个发布（触发事件），那么父组件在模板里创建子组件的时候，同时可以监听子组件触发的事件
-
截图1赞 · 0采集
-
- poppowerlb2 2020-06-16
父/子组件如何通信：
父组件向子组件传值是通过在组件上绑定属性的方式，如:content、:index这两个属性
子组件向父组件传值是通过发布-订阅模式，子组件通过this.$emit('事件', '值')方法触发事件传递值，父组件监听对应事件可以获取到传递过来的值
-
截图1赞 · 0采集
-
- poppowerlb2 2020-06-16
在Vue中，父组件向子组件传递值是通过属性的形式。
-
截图0赞 · 0采集
-
- 斯巴达汉子 2020-05-25
父子组件的一些交互.
父组件如何向子组件传参数
子组件如何向父组件传参数~
父组件向子组件传递数据，可以用属性。
子组件向父组件可以发出事件，父组件监听到该事件，再触发方法
-
截图0赞 · 0采集
-
- weixin_慕盖茨8434217 2020-05-23
new Vue({})---创建一个Vue实例
el: "#root"---绑定id为root的元素（挂载点，只处理挂载点下的内容）
data: {msg: "Hello World"}---实例的数据项
template---模板，挂载点即元素里面的内容为模板，可在元素或实例中template下定义
methods---v-on指令绑定的方法
{{msg}}---插值表达式，在元素中使用，msg为实例data中数据项
computed---计算属性
watch:{}---监听器，实例中属性
指令
v-text---显示内容，内容里的元素被转译
v-html---显示内容，内容里的元素不被转译
v-on---绑定事件（简写 @），v-on: click="function"绑定一个点击事件
v-bind---属性绑定（简写 ：），实例=>元素 单向数据绑定。:title='title1'，title1为data中数据项，=后为表达式，因此'1234'+'title1'也可以
v-model--- 双向数据绑定，元素<=>实例
v-if---直接从dom中删除
v-show---设置display:none
v-for---循环，v-for="{item, index} for list" :key="index"，list数组为data中数据项。:key提升渲染的效率，每一项值都不能相同
组件
定义全局组件，全局可用
Vue.component('todo-item', {
template: '<li>hello world</li>'
})
定义局部组件，需要在vue实例components属性中注册
var TodoItem = {
template: '<li>hello world</li>'
}
components: {'todo-item' : TodoItem}
组件在元素中使用
<todo-item></todo-item>
组件之间数据通信
父=>子---通过属性进行传递
元素中 :content=“item"
组件中props: ['content']---接受外层传递过来的属性content
子=>父---通过发布定义模式进行传递
父组件@delete="function"---父组件监听到子组件delete事件执行function方法
子组件 this.$emit('delete', this.index)---子组件向外触发一个delete事件，同时携带一个参数
全局样式与局部样式
组件中<style scoped></style>
scoped限制样式只对当前组件有效
不加scoped为全局样式，会影响其他组件样式
- 0赞 · 0采集
