-
通过绑定属性值的形式给子组件传值
使用props+v-bing（缩写:':'）绑定属性值，
程序块
<!-- 通过绑定属性值的形式给子组件传值 -->
<!-- 第一块 -->
<my-view :msg1="msg"></my-view>
<!-- 第二块 -->
<template id="temp">
<div>
<button type="button">传一个父级组件的值给我---{{msg1}}</button>
</div>
</template>
<!-- 第三块 -->
const vm = new Vue({
el:'#app',
data:{
msg:'我是中国人',
},
methods:{
show(){
console.log("爸爸打我了！")
}
},
components:{
"myView":{
template:'#temp',
props:['msg1'],//props中的数据是父组件向子组件传递的数据,是只读,不建议修改(修该后控制台报错，别这么干)
data:function() {//这里的数据是组件私有的,可读,可写
return {}
}
},
}
})
-
通过自定义的事件给子组件传递行为
使用this.&emit()+v-on(缩写：'@')绑定行为
程序块
<!-- 通过自定义的事件给子组件传递行为,这里的show不能加括号,因为要将方法的引用原封不动的交给子组件，如果加了就变成将方法的调用结果给子组件了 -->
<!-- 不同于组件和 prop，事件名不存在任何自动化的大小写转换。---parent-method方法名称在$emit()中不能写成parentMethod-->
<!-- 第一块 -->
<my-action @parent-method="show"></my-action>
<!-- 第二块 -->
<!-- 通过自定义的事件给子组件传递行为 -->
<template id="temp1">
<div>
<button type="button" @click="action">点我触发父级方法</button>
</div>
</template>
<!-- 第三块 -->
const vm = new Vue({
el:'#app',
data:{
},
methods:{
show(){
console.log("爸爸打我了！")
}
},
components:{
"myAction":{
template:"#temp1",
methods:{
action() {
this.$emit("parent-method");
}
}
}
}
})
-
子组件向父组件传递属性值
使用this.&emit()+v-on(缩写：'@')向上传递
程序块
<!-- 子组件向父组件传递属性值 -->
<!-- 第一块 -->
<com @func="show1"></com>
<div>父级组件中的数据----{{name}}</div>
<!-- 第二块 -->
<!-- 子组件向父组件传递属性值 -->
<template id="temp2">
<div>
<button @click="action1">点我向父级组件传递数据</button>
</div>
</template>
<!-- 第三块 -->
const com = {
template:'#temp2',
data:function() {
return {
obj:{
'name':'大头儿子',
'id':"sxxx"
}
}
},
methods:{
action1(){
this.$emit('func',this.obj)
}
}
}
const vm = new Vue({
el:'#app',
data:{
name:''
},
methods:{
show1(data){
this.name = data.name;
}
},
components:{
com
}
})
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<!-- 通过绑定属性值的形式给子组件传值 -->
<my-view :msg1="msg"></my-view>
<!-- 通过自定义的事件给子组件传递行为,这里的show不能加括号,因为要将方法的引用原封不动的交给子组件，如果加了就变成将方法的调用结果给子组件了 -->
<!-- 不同于组件和 prop，事件名不存在任何自动化的大小写转换。---parent-method方法名称在$emit()中不能写成parentMethod-->
<my-action @parent-method="show"></my-action>
<!-- 子组件向父组件传递属性值 -->
<com @func="show1"></com>
<div>父级组件中的数据----{{name}}</div>
</div>
<template id="temp">
<div>
<button type="button">传一个父级组件的值给我---{{msg1}}</button>
</div>
</template>
<!-- 通过自定义的事件给子组件传递行为 -->
<template id="temp1">
<div>
<button type="button" @click="action">点我触发父级方法</button>
</div>
</template>
<!-- 子组件向父组件传递属性值 -->
<template id="temp2">
<div>
<button @click="action1">点我向父级组件传递数据</button>
</div>
</template>
<script type="text/javascript">
const com = {
template:'#temp2',
data:function() {
return {
obj:{
'name':'大头儿子',
'id':"sxxx"
}
}
},
methods:{
action1(){
this.$emit('func',this.obj)
}
}
}
const vm = new Vue({
el:'#app',
data:{
msg:'我是中国人',
name:''
},
methods:{
show(){
console.log("爸爸打我了！")
},
show1(data){
this.name = data.name;
}
},
components:{
"myView":{
template:'#temp',
props:['msg1'],//props中的数据是父组件向子组件传递的数据,是只读,不建议修改(修该后控制台报错，别这么干)
data:function() {//这里的数据是组件私有的,可读,可写
return {}
}
},
"myAction":{
template:"#temp1",
methods:{
action() {
this.$emit("parent-method");
}
}
},
com
}
})
</script>
</body>
</html>
网友评论