vue组件间通讯，相互传递数据 插槽slot

一、父组件向子组件传递数据（利用子组件的props属性）

<div id="app">
　　　
　　 
　　
　　
　　
div>

var vm=new Vue({
　　　　el:"#app",
　　　　data:{},
　　　　methods:{},
　　　　components:{
　　　　　　"parent-component":{
　　　　　　　　data(){
　　　　　　　　　　return {
　　　　　　　　　　　　title:"我是父组件",
　　　　　　　　　　　　msg:"我是父组件数据"
　　　　　　　　　　}
　　　　　　　　},
　　　　　　　　template:"#parent-component",
　　　　　　　　components:{
　　　　　　　　　　"child-component":{
　　　　　　　　　　　　data(){
　　　　　　　　　　　　　　return {
　　　　　　　　　　　　　　　　title:"我是子组件",
　　　　　　　　　　　　　　　　msg:"我是子组件数据"
　　　　　　　　　　　　　　}
　　　　　　　　　　　　},
　　　　　　　　　　　　methods:{
　　　　　　　　　　　　　　change(){
　　　　　　　　　　　　　　　　this.msg=this.md; //此时将子组件属性md(md的属性值来自于父组件：msg)赋给子组件msg
　　　　　　　　　　　　　　}
　　　　　　　　　　　　},
　　　　　　　　　　　　props:[md],
　　　　　　　　　　　　template:"#child-component"
　　　　　　　　　　}
　　　　　　　　}
　　　　　　}
　　　　}
　　});

二、子组件向父组件传递数据

1.利用this.$emit('事件名称'，数据)向父组件广播数据

2.v-on监听接收数据

1 <div id="app">
　　

　　
　　

　div>

1 var vm=new Vue({
2 　　el："#app",
　　　data:{},
　　　methods:{},
　　　components:{
　　　　　"parent-component":{
　　　　　　　　data(){
　　　　　　　　　　return {
　　　　　　　　　　　　title:"我是父组件",
　　　　　　　　　　　　msg:"我是父组件数据"
　　　　　　　　　　}
　　　　　　　　},
　　　　　　　　methods:{
　　　　　　　　　　get(msg){
　　　　　　　　　　　　this.msg=msg //接收子组件传递过来的数据
　　　　　　　　　　}
　　　　　　　　},
　　　　　　　　template:"#parent-component",
　　　　　　　　components:{
　　　　　　　　　　"child-component":{
　　　　　　　　　　　　data(){
　　　　　　　　　　　　　　return {
　　　　　　　　　　　　　　　　title:"我是子组件",
　　　　　　　　　　　　　　　　msg:"我是子组件数据"
　　　　　　　　　　　　　　}
　　　　　　　　　　　　},
　　　　　　　　　　　　methods:{
　　　　　　　　　　　　　　send(){
　　　　　　　　　　　　　　　　this.$emit("child-msg",this.msg);//将子组件的数据发射（广播）出去
　　　　　　　　　　　　　　}
　　　　　　　　　　　　},
　　　　　　　　　　　　template:"#child-component"
　　　　　　　　　　}
　　　　　　　　}
　　　　　　}
　　　}
3 })

 插槽--slot

<div id="app">
        <aaa>
            <ul>
                <li>111li>
                <li>222li>
                <li>333li>
            ul>
        aaa>
        <bbb>
            <ul>
                <li>111li>
                <li>222li>
                <li>333li>
            ul>
        bbb>
        <ccc>
            <ul slot="ul-slot">
                <li>111li>
                <li>222li>
                <li>333li>
            ul>
            <ol slot="ol-slot">
                <li>111li>
                <li>222li>
                <li>333li>
            ol>
        ccc>
    div>

    <template id="aaa">
        <h3>welcome vue1h3>
    template>

    <template id="bbb">
        <h3>welcome vue2h3>
        <slot>slot>
    template>

    <template id="ccc">
        <slot name="ol-slot">这是默认的情况slot>
        <slot name="ul-slot">这是默认的情况2slot>
        <p>welcome vuep>
    template>

var vm = new Vue({
            el: "#app",
            data: {},
            methods: {},
            components: {
                "aaa": {
                    template: "#aaa"
                },
                "bbb": {
                    template: "#bbb"
                },
                "ccc": {
                    template: "#ccc"
                }
            }
        })

 

转载于:https://www.cnblogs.com/junechen/p/9300102.html