标签:methods one 区域 开始 com 数据 component var 创建
开始时我们先来用之前的父组件向子组件传递数据的知识完成下面这个问题
总结来说就一句话: 通过事件绑定机制,将父组件上的方法传递给子组件
// 1
var vm = new Vue({
el : "#app",
methods: {
show(){
console.log(’我是父组件上的方法‘);
},
})
// 2
<template id="tem">
<div>
<h3>我是子组件</h3>
// 点击button按钮,通过$emit实例api自定义方法
<button @click="button">触发父组件传递过来的方法</button>
</div>
</template>
Vue.component('tem-app',{
template : '#tem',
methods: {
button(){
// vm.$emit( eventName, […args] ) :
// 触发当前实例上的事件
// 参数一,实例[父组件]定义的方法【事件名称】
// 参数二,可选的,子组件向父组件传递的数据,可以是多个,
this.$emit('func')
}
},
})
// 3
ok ,再来看看我们vue实例所要控制的区域
<div id="app">
// 父组件通过绑定了一个由子组件定义的方法,将自己身上的方法传递过去
<tem-app @func="show"></tem-app>
</div>
这样我们就完成了,父组件向子组件传递一个方法的问题了
var obj = {
name : "张三",
age : 18,
sex : "男"
}
// vue实例
var vm = new Vue({
el : "#app",
methods: {
show(obj){
// 父组件拿到子组件传递过来的数据
console.log(obj)
}
},
})
<body>
<!--
通过事件绑定机制,将父组件上的方法传递给子组件,
子组件通过第二的参数将数据传递给父组件
-->
<div id="app">
<tem-app @func="show"></tem-app>
</div>
<template id="tem">
<div>
<h3>我是子组件</h3>
<button @click="button">触发父组件传递过来的方法</button>
</div>
</template>
<script>
var obj = {
name : '李嘉明',
age : 12,
sex : '男'
}
Vue.component('tem-app',{
template : '#tem',
data : function(){
return {
msg : '我是子组件上的数据'
}
},
methods: {
button(){
// vm.$emit( eventName, […args] ) :
// 触发当前实例上的事件
// 参数一,实例[父组件]定义的方法
// 参数二,可选的,子组件向父组件传递的数据,可以是多个,
this.$emit('func',obj)
}
},
})
var vm = new Vue({
el : "#app",
methods: {
show(obj){
// 父组件拿到子组件传递过来的数据
console.log(obj)
}
},
})
</script>
</body>
总结:
1. 子组件中需要以某种方式例如点击事件的方法来触发一个自定义事件
2. 将需要传的值作为$emit的第二个参数,该值将作为实参传给响应自定义事件的方法
3. 在父组件上绑定子组件$meit自定义的方法
标签:methods one 区域 开始 com 数据 component var 创建
原文地址:https://www.cnblogs.com/ifon/p/11389781.html