vue单文件父子组件之间的通信
2019-08-06 本文已影响0人
HYC_
主要笔记内容：
- 父组件向子组件传值；
- 子组件向父组件传值；
一、父组件向子组件传值：
步骤：
1、父组件向下传递数据给子组件时，子组件需要通过props声明注册‘prop’来接受数据;
2、子组件自定义的标签，通过v-bind绑定prop;
demo1:
<!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>demo1</title>
<style>
li {
list-style: none;
}
[v-cloak] {
display: none
}
</style>
</head>
<body>
<div id="app">
<!--步骤2、子组件通过v-bind绑定prop; -->
<data-list v-bind:lists="list"></data-list>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
Vue.component('data-list', {
// 步骤1、父组件通过props向下传递数据数组list给子组件，子组件需要通过props声明注册‘prop’;（注册的prop可以和数据不同名）
props: ['lists'],
template: `
<div>
<ul>
<li v-for="item in lists">{{item}}</li>
</ul>
</div>
`
})
var app = new Vue({
el: "#app",
data() {
return {
list: ['A', 'B', 'C']
}
}
})
</script>
</body>
</html>
demo2:
<!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>demo2</title>
<style>
li {
list-style: none;
}
[v-cloak] {
display: none
}
</style>
</head>
<body>
<!-- demo:用组件的方法实现在input中输入内容点击添加按钮可在arr后添加，点击删除可删除内容-->
<div id="app">
<data-input></data-input>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
// 父组件
Vue.component('data-input', {
data: function () {
return {
inputValue: '',
arrs: ['A', 'B', 'C']
}
},
// 2、子组件自定义的标签data-lists，通过v-bind绑定prop;
template: `
<div>
<input v-model="inputValue">
<button @click="add()">add</button>
<data-lists v-bind:list="arrs"></data-lists>
</div>
`,
methods: {
add: function () {
console.log("add clcik!");
this.arrs.push(this.inputValue)
this.inputValue = ''
}
}
})
// 子组件
Vue.component('data-lists', {
// 1、父组件向下传递数据给子组件时，子组件需要通过props声明注册‘prop’来接受数据;
props: ['list'],
data() {
return {
}
},
template: `
<ul>
<li v-for="(value,index) in list" v-cloak>
{{value}}
<button @click="deleted">deleted</button>
</li>
</ul>
`,
methods: {
deleted: function (index) {
console.log("deleted!");
this.list.splice(index, 1)
}
}
})
var app = new Vue({
el: "#app",
data() {
return {
}
},
methods: {
},
})
</script>
</body>
</html>
书写规范：
①组件名建议使用小写短横线命名：如todo-item、blog-post
②当在组件中使用data属性的时候(除了new Vue外的任何地方),它的值必须是一个返回对象的函数.
作用:每个实例可以维护一份被返回对象的独立拷贝.
//组件名建议使用小写短横线命名：如todo-item、blog-post
Vue.component('组件名',{
//当在组件中使用data属性的时候(除了new Vue外的任何地方),它的值必须是一个返回对象的函数.作用:每个实例可以维护一份被返回对象的独立拷贝.
props: ['item'],//props可以指定类型
data:function(){
return{
...
}
},
template:`...`
})
二、子组件向父组件传值
步骤：
1、子组件自定义事件；
2、子组件使用$.emit()触发事件，将事件及参数值其传递给父组件；
方法名推荐以
小写短横线命名;
格式：this.$emit('方法名', 要传递的数据);
3、父组件使用$on()监听子组件事件及其事件默认传递过来的参数；
或父组件也可以直接在子组件的自定义标签上使用v-on来监听子组件触发的自定义事件，如下demo1；
demo1:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue - 子组件传递数据到父组件</title>
</head>
<body>
<div id="app">
<p>{{ total }}</p>
<!-- 3、父组件使用$on()监听子组件事件；或父组件也可以直接在子组件的自定义标签上使用v-on来监听子组件触发的自定义事件。 -->
<button-counter v-on:add="addTotal"></button-counter>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
Vue.component('button-counter', {
template: '<button v-on:click="add">{{ counter }}</button>',
data: function () {
return {
counter: 0
}
},
methods: {
// 1、子组件自定义事件；
add: function () {
this.counter += 1
// 2、子组件使用$.emit()触发事件；
this.$emit('add')
}
},
})
new Vue({
el: '#app',
data: {
total: 0
},
methods: {
addTotal: function () {
this.total += 1
}
}
})
</script>
</body>
</html>
未完，持续整理中~
