注释相当完整，可直接复制到html里文件，观察如何实现哦
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<!-- 方法1 -->
<prop-slotname :parent="parent"
text="this is a text">
<template v-slot:header="slotProps">
<!-- 子传父亲数据 通过
父 ：v-slot:header="自定义名字"
v-slot === #
子 ：<slot name="header" :child="child">
-->
<div>
{{ slotProps.child.value }} header
<!-- 方法1 -->
</div>
</template>
<template #footer="slotfooter">
<div>
{{ slotfooter.child.value }} footer
</div>
</template>
</prop-slotname>
<!-- 方法2 -->
<event-slot>
</event-slot>
<!-- 方法3 -->
<func @fatherfunc="parentFunc">
<!-- @fatherfunc必须是小写 -->
</func>
<!-- 方法4 -->
<attrs-listeners url="123"
gg="125"
@fatherfunc="parentFunc"
:parent="parent">
</attrs-listeners>
<!-- 方法5 -->
<provide-inject>
</provide-inject>
<!-- 方法6 -->
<children-parent>
</children-parent>
</div>
<script type="module">
/**
*
* 方法1 props-slotName ------------ 父向子互传数据 子向父 一般 麻烦
* 方法2 bus event --------- 父子互相 挺好 但是要考虑执行顺序
* 方法3 $emit ------------ 一般，只能接受父亲的方法, 子组件标签上绑定方法
* 方法4 $attrs $listener ------------ 挺好使，不过不能往父亲传值
* 方法5 provide-inject ------------ 感觉作用比较小
* 方法6 $parent $children ----------- 挺好 就是获取子麻烦
*/
import Vue from 'https://cdn.jsdelivr.net/npm/vue@2.6.11/dist/vue.esm.browser.js';
/**
*
* 方法一
*
*/
Vue.component('prop-slotname', {
props: ['parent'], //父向子传递数据
//方法1
data() {
return {
child: {
value:"方法1的child--"
}
}
},
mounted() {
console.log('方法1: this.parent: ', this.parent);
},
template: `
<div :child="child">
<!-- <div :child="child" text="this is a text"> --|-- text="this is a text" 会被渲染到外层头 -->
方法1 {{ child.value }}
方法1: {{ parent.value }}
<slot></slot>
<h6><slot name="header" :child="child">子header</slot></h6>
<h1><slot name="footer" :child="child">子footer</slot></h1>
</div>
`
}) //方法1 父子互传数据 还行
var Event = new Vue(); //方法2的公交车
/**
*
* 方法二
*
*/
Vue.component('event-slot', {
methods: {
toFather(son) {
console.log('方法2的方法放到了Bus!!!'+son);
}
},
mounted(){
Event.$on('tofather',this.toFather) //给busEvent 上方法
},
template:`
<div>方法2: eventSlot</div>
`
}) //方法2 事件中心 按顺序mounted执行 理论上可任意传数据方法 挺好
/**
*
* 方法三
*
*/
Vue.component('func',{
methods: {
toFather: function(){
Event.$emit('tofather','方法3执行Bus上的方法二') //兄弟传送方法
}
},
mounted(){
this.$emit("fatherfunc","方法3：儿子的传值 func") //父亲 传方法
},
template: `
<div>
方法3: <button @click="toFather">childBtn</button>
</div>
`
}) //父亲给儿子传方法 方法命必须为小写 方法3 func传值 父传子方法 一般
/**
*
* 方法四
*
*/
Vue.component('attrs-listeners',{
mounted(){
console.log('方法4: this.$attrs: ', this.$attrs); //接受组件头的所有数据
console.log('方法4: this.$listener: ', this.$listeners); //接受组件头的所有方法
},
template: `
<div>
方法4: attrs-listeners
</div>
`
}) //父亲给儿子传方法与数据 比较好 方法4 attrs-lisnters 父传子方法与数据 还行
/**
*
* 方法五
*
*/
Vue.component('provide-inject',{
inject:['test'],
mounted(){
console.log(this.test); //父亲provide给的值
},
template: `
<div>
方法5:provide-inject
</div>
`
}) //方法5 provide-inject 父传子数据 一般
/**
*
* 方法六
*
*/
Vue.component('children-parent',{
mounted(){
console.log("方法6:this.$parent", this.$parent) //直接获取父vue节点
},
template: `
<div>
方法6: children-parent
</div>
`
}) //方法六 children parent 父子互传 较好
/**
*
* 父亲节点
*
*/
var vm = new Vue({
el: '#app',
data: {
parent: {
value: 'I am father'
}
},
provide(){
return{
test:'方法5: parentProvide' //方法5
}
},
mounted() {
// console.log("father", childrenFunc)
console.log('方法6: this.$children', this.$children); //方法六
Event.$emit('tofather','father传值给event-slot') //方法2
},
methods: {
parentFunc(son) {
console.log("父亲方法：这是父亲方法,儿子传值：",son)
}
},
})
</script>
</body>
</html>
400
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
