vue组件之间的传值
组件组件可以大致的分为三类父组件子组件兄弟组件当使用组件时,往往可能会遇到这样的问题如果我想通过父组件向子组件传值,我应该怎么办?同样的道理,子组件向父组件传值怎么办?组件之间传值也可以分为三类父组件向子组件传值子组件向父组件传值两个兄弟之间的组件传值父组件向子组件传值父组件以属性的形式将要传递的值绑定到子组件身上,然后子组件再通过props属性接收传递的值&l...
组件
组件可以大致的分为三类
- 父组件
- 子组件
- 兄弟组件
当使用组件时,往往可能会遇到这样的问题
如果我想通过父组件向子组件传值,我应该怎么办?
同样的道理,子组件向父组件传值怎么办?
组件之间传值也可以分为三类
- 父组件向子组件传值
- 子组件向父组件传值
- 两个兄弟之间的组件传值
父组件向子组件传值
父组件以属性的形式将要传递的值绑定到子组件身上,然后子组件再通过props
属性接收传递的值
<div id="app">
// 将要传递的值绑定在属性上
<cpn :title="msg" :num1="num" num2="num" :arr1="arr" arr2="arr"></cpn>
</div>
<script>
Vue.component('cpn', {
// 利用 props 属性接收传递的值
props: ['title', 'num1', "num2", 'arr1', 'arr2'],
data() {
return {
msg: '子组件'
}
},
template: `
<div>
<div>{{msg}}</div>
<div>{{title}}</div>
<div>{{typeof num1}}</div>
<div>{{typeof arr2}}</div>
<li v-for="item in arr1">{{item}}</li>
<li v-for="item in arr2">{{item}}</li>
</div
`
})
new Vue({
el: '#app',
data: {
msg: '父组件',
num: 1,
arr: ['张三', '李四', '王麻子'],
obj: {
name: '张三',
age: 18
}
}
})
注意
1.传的值可以是数字、对象、数组等,传的值动态绑定(v-bind:)和静态绑定是有区别的,静态绑定传递的值的类型最终都会变成字符串类型,另外如果对这个值进行遍历的话,动态绑定的值(假如是数组),那么将会将数组的每一项输出,但如果是静态绑定的话,将会把传递的值的名称打印(arr),具体看上面的例子
2.在props中使用驼峰形式,模板的名字需要使用短横线的形式,字符串形式的模板中没有这个限制
3.单向绑定
子组件向父组件传值
子组件向父组件传值主要是通过事件监听的方式来实现的
子组件使用$emait
来触发事件,然后父组件通过v-on
来监听子组件的事件
$emit
的第一个参数用来自定义事件的名称,第二个参数用来传递要传递的值
<div id="app">
<div>子组件传过来的内容是:{{msg}}</div>
<!-- 父组件监听子组件的事件 -->
<cpn @post-data="handle($event)"></cpn>
</div>
<script>
Vue.component('cpn', {
data() {
return {
msg: '我是子组件传过来的内容'
}
},
// 子组件使用 $emit 来触发事件
template: `
<div>
<div>11111111</div>
<button @click='$emit("post-data", msg)'>按钮</button>
</div>
`
})
var vm = new Vue({
el: '#app',
data: {
msg: ''
},
methods: {
handle(value) {
this.msg = value;
}
}
})
</script>
兄弟组件之间传值
兄弟组件之间的传值主要借助于事件中心来传值
主要步骤:
1.提供事件中心var hub = new Vue()
2.传递数据,通过触发hub.$emit(方法名, 传递的值)
事件来传递值
3.接收数据,在mounted(){}
钩子中,通过触发```hub.$off()``方法来接收数据
4.另外,还可以通过hub.$off(name)
方法l来销毁,销毁之后就无法进行传递值了
<div id="app">
<div>父组件</div>
<div>
<button @click='handle'>销毁事件</button>
</div>
<test-tom></test-tom>
<test-jerry></test-jerry>
</div>
<script>
//1、 提供事件中心
var hub = new Vue();
Vue.component('test-tom', {
data: function(){
return {
num: 0
}
},
template: `
<div>
<div>TOM:{{num}}</div>
<div>
<button @click='handle'>点击</button>
</div>
</div>
`,
methods: {
handle: function(){
//2、传递数据方,通过一个事件触发hub.$emit(方法名,传递的数据) 触发兄弟组件的事件
hub.$emit('jerry-event', 2);
}
},
mounted: function() {
// 3、接收数据方,通过mounted(){} 钩子中 触发hub.$on(方法名
hub.$on('tom-event', (val) => {
this.num += val;
});
}
});
Vue.component('test-jerry', {
data: function(){
return {
num: 0
}
},
template: `
<div>
<div>JERRY:{{num}}</div>
<div>
<button @click='handle'>点击</button>
</div>
</div>
`,
methods: {
handle: function(){
//2、传递数据方,通过一个事件触发hub.$emit(方法名,传递的数据) 触发兄弟组件的事件
hub.$emit('tom-event', 1);
}
},
mounted: function() {
// 3、接收数据方,通过mounted(){} 钩子中 触发hub.$on()方法名
hub.$on('jerry-event', (val) => {
this.num += val;
});
}
});
var vm = new Vue({
el: '#app',
data: {
},
methods: {
handle: function(){
//4、销毁事件 通过hub.$off()方法名销毁之后无法进行传递数据
hub.$off('tom-event');
hub.$off('jerry-event');
}
}
});
</script>
更多推荐
所有评论(0)