vue-父组件和子组件的交互

客官°小女子只卖身不卖艺 2023-06-05 13:59 101阅读 0赞

父组件

![复制代码][aHR0cHM6Ly9jb21tb24uY25ibG9ncy5jb20vaW1hZ2VzL2NvcHljb2RlLmdpZg]

<template>
       <div>
              <span>{
      {time}}</span><span>版权:{
      {name}}</span>
              
              <jubu v-bind:jubus = "jubuName"></jubu>
       </div>
    </template>
    <script>
       import jubu from './jubu.vue';  //引入子组件
        export default{
            data : function(){
                return {
                    time:'20180406',
                    name : '福安社口镇',
                    jubuName : {name:'sjf',age:26},  //给子组件传值
                }
            },
            components : {
                'jubu' : jubu   //组册子组件
            }
        }
    </script>
    <style scoped>
        *{
            color:red;
        }
    </style>

![复制代码][aHR0cHM6Ly9jb21tb24uY25ibG9ncy5jb20vaW1hZ2VzL2NvcHljb2RlLmdpZg]

子组件

![复制代码][aHR0cHM6Ly9jb21tb24uY25ibG9ncy5jb20vaW1hZ2VzL2NvcHljb2RlLmdpZg]

<template>
        
        <strong>{
      {jubus.name}}{
      {jubus.age}}是局部组件{
      {id}}</strong>
    </template>
    <script>
        export default{
            data : function(){
                return {
                    id : "9527",
                    
                }
            },
            props : ["jubus"], //父组件可能有很多属性，要接收哪个在这里定义。
        }
    </script>

![复制代码][aHR0cHM6Ly9jb21tb24uY25ibG9ncy5jb20vaW1hZ2VzL2NvcHljb2RlLmdpZg]

在子组件中，props也可以有进一步的详细设置

![复制代码][aHR0cHM6Ly9jb21tb24uY25ibG9ncy5jb20vaW1hZ2VzL2NvcHljb2RlLmdpZg]

<template>
        
        <strong>{
      {jubus}}是局部组件{
      {id}}</strong>
    </template>
    <script>
        export default{
            data : function(){
                return {
                    id : "9527",
                    
                }
            },
            //props : ["jubus"], //父组件可能有很多属性，要接收哪个在这里定义。
            props : {
                jubus : {
                    type : String,  //接收值得类型，类型不对就会报错
                    //type : [String,Number...]  多种类型就写成数组
                    default : "weizhi",  //如果没有传值进来，就使用这里定义的默认值
                    //require : true,    //该值是否为必须值，true就是没这个值就报错。与default二选一使用
                },
            }
        }
    </script>

![复制代码][aHR0cHM6Ly9jb21tb24uY25ibG9ncy5jb20vaW1hZ2VzL2NvcHljb2RlLmdpZg]

子组件与父组件交互

![复制代码][aHR0cHM6Ly9jb21tb24uY25ibG9ncy5jb20vaW1hZ2VzL2NvcHljb2RlLmdpZg]

子组件
    <template>
        
        <div>
            <button class="btn-sm btn-primary" @click="share">分享</button>        
        </div>
    </template>
    <script>
        methods : {
                    share(){
                        this.$emit("shared")
                    },
        },
    </script>

![复制代码][aHR0cHM6Ly9jb21tb24uY25ibG9ncy5jb20vaW1hZ2VzL2NvcHljb2RlLmdpZg]

父组件
    <template>
       <div>
              <p>分享次数{
      {num}}</p>
              <jubu @shared = "fooShare"></jubu>
       </div>
    </template>
    
    <script>
             import jubu from './jubu.vue';  //引入子组件
             export default{
                    data : function(){
                           num : 0 ,
                    },
                    components : {
                'jubu' : jubu   //组册子组件
            },
                    methods : {
                fooShare(){
                            this.num++
                }
            }
             }
    </script>

![复制代码][aHR0cHM6Ly9jb21tb24uY25ibG9ncy5jb20vaW1hZ2VzL2NvcHljb2RlLmdpZg]

以上代码实现的是，每当点击子组件中的分享按钮时，父组件中的num就会加一。

如果想从子组件键值对给父组件。子组件   this.$emit("shared",\{name:"想传什么值",content:"就传什么值"\})

父组件   fooShare(event)\{this.num++;console.log(event);\}   //event就是子组件传过来的\{name:"想传什么值",content:"就传什么值"\}

如果fooShare函数除了接收event时间对象，自己本身也有参数的话，<jubu @shared = "fooShare(10,$event)"></jubu>

fooShare(age,$event)\{this.num++;console.log(event.name+age);\}

以下是代码

![复制代码][aHR0cHM6Ly9jb21tb24uY25ibG9ncy5jb20vaW1hZ2VzL2NvcHljb2RlLmdpZg]

<template>
        
        <div>
            <strong>{
      {jubus}}是局部组件{
      {id}}</strong>
            <button class="btn-sm btn-primary" @click="share">分享</button>        
        </div>
    
    </template>
    <script>
        export default{
            data : function(){
                return {
                    id : "9527",
                    
                }
            },
            methods : {
                    share(){
                        this.$emit("shared",{name:"sjf"})
                    },
                },
        }
    </script>

![复制代码][aHR0cHM6Ly9jb21tb24uY25ibG9ncy5jb20vaW1hZ2VzL2NvcHljb2RlLmdpZg]

<template>
       <div>
              <span>{
      {time}}</span><span>版权:{
      {name}}</span>
              <p>分享次数{
      {num}}</p>
              <jubu @shared = "fooShare(10,$event)"></jubu>
       </div>
    </template>
    <script>
       import jubu from './jubu.vue';  //引入子组件
        export default{
            data : function(){
                return {
                    num : 0,
                }
            },
            components : {
                'jubu' : jubu   //组册子组件
            },
            methods : {
                fooShare(age,event){
                   this.num++;
                   console.log(10+event.name);
                }
            }
        }
    </script>
    <style scoped>
        *{
            color:red;
        }
    </style>

![复制代码][aHR0cHM6Ly9jb21tb24uY25ibG9ncy5jb20vaW1hZ2VzL2NvcHljb2RlLmdpZg]

<jubu><strong>父组件</strong></jubu>    jubu是自定义组件，在其中写的<strong>父组件</strong>是无法显示的。

如果想让其显示，则在写组件的时候要加上<slot></slot>标签

![复制代码][aHR0cHM6Ly9jb21tb24uY25ibG9ncy5jb20vaW1hZ2VzL2NvcHljb2RlLmdpZg]

<template>
        <div>
            <slot>
               <strong>{
      {jubus}}是局部组件{
      {id}}</strong>
               <button class="btn-sm btn-primary" @click="share">分享</button>
            </slot>        
        </div>
    
    </template>

![复制代码][aHR0cHM6Ly9jb21tb24uY25ibG9ncy5jb20vaW1hZ2VzL2NvcHljb2RlLmdpZg]

加上slot后，如果<jubu><strong>父组件</strong></jubu>，那就显示<strong>父组件</strong>。如果<jubu></jubu>,那就显示子组件的里的template内容。

![复制代码][aHR0cHM6Ly9jb21tb24uY25ibG9ncy5jb20vaW1hZ2VzL2NvcHljb2RlLmdpZg]

<template>
        <div>
            
           <slot name="one"> <strong>{
      {jubus}}是局部组件{
      {id}}</strong></slot>
            <slot name="two"><button class="btn-sm btn-primary" @click="share">分享</button></slot>
    
        </div>
    
    </template>

![复制代码][aHR0cHM6Ly9jb21tb24uY25ibG9ncy5jb20vaW1hZ2VzL2NvcHljb2RlLmdpZg]

<jubu @shared = "fooShare(10,$event)">
           <strong slot="one">one组件</strong>
           <strong slot="two">two组件</strong>
    </jubu>

给slot标签加name后，以后就能根据name名字来一对一替换。

[aHR0cHM6Ly9jb21tb24uY25ibG9ncy5jb20vaW1hZ2VzL2NvcHljb2RlLmdpZg]: /images/20230601/98816f6e9efe44eab521636d1100a11b.png