vue子调父 $emit props及<slot>的综合使用

在实际的VUE项目中会遇到父子组件互相传递数据的实际应用，还有父子组件相互嵌套使用的应用，下面例子只是做的一个小demo方便自己理解记忆。

ps:App.vue   父组件

　 Hello.vue 子组件

<!--App.vue  :--><template>　　<div id="app">　　　　<hello @newNodeEvent="parentLisen" title="我是标题">我是插槽"    slot"里面的东西</hello>　　</div></template><script>    import hello from './components/Hello'    export default {        name: 'app',        components: {            hello        },        methods: {            parentLisen(evtValue) {                    //evtValue 是子组件传过来的值                alert(evtValue)            }        }    }</script>

这是父组件的内容，下面是子组件的内容，内容不是看完父组件看子组件，而是从父到子再到父，如此对照，这样也比较符合MVC模式吧

<!--Hello.vue  :--><template>　　<div class="hello">　　　　<input type="button" @click="chilCall()" value="在chilCall函数中子调取父的事件" />         <!--   --><slot></slot>　　</div></template><script>    export default {        name: 'hello',        props:  ['title'],        methods: {            chilCall(pars) {                //在chilCall函数中子调取父的事件,第一个参数为事件名。第二个参数是向父组件传递的值                this.$emit('newNodeEvent', '我是子元素传过来的')            }        }    }</script>

总结一下：

父组件向子组件传值
子组件在props中创建一个属性，用以接收父组件传过来的值
父组件中注册子组件
在子组件标签中添加子组件props中创建的属性
把需要传给子组件的值赋给该属性

子组件向父组件传值

子组件中需要以某种方式例如点击事件的方法来触发一个自定义事件
将需要传的值作为$emit的第二个参数，该值将作为实参传给响应自定义事件的方法
在父组件中注册子组件并在子组件标签上绑定对自定义事件的监听

在通信中，无论是子组件向父组件传值还是父组件向子组件传值，他们都有一个共同点就是有中间介质，子向父的介质是自定义事件，父向子的介质是props中的属性。抓准这两点对于父子通信就好理解了

<slot>的一些说明

slot就是提前为要渲染的标签或者模板占个坑

Slot 是在组件模板中设置的用于在父组件中插入其孙子组件（即自身的子组件）或DOM片段的插槽。

Scoped Slots 允许在 Slots 中绑定当前组件的数据，然后经由父组件绑定到其孙子组件（即自身的子组件）的 Props 中传递给孙子组件（即自身的子组件），或绑定到DOM片段。