父子组件传参

vue组件

什么是组件： 组件的出现，就是为了拆分Vue实例的代码量的，能够让我们以不同的组件，来划分不同的功能模块，将来我们需要什么样的功能，就可以去调用对应的组件即可。

组件化和模块化的不同：

● 模块化：是从代码逻辑的角度进行划分的；方便代码分层开发，保证每个功能模块的职能单一
● 组件化：是从UI界面的角度进行划分的；前端的组件化，方便UI组件的重用
注意：组件中的DOM结构，有且只能有唯一的根元素（Root Element）来进行包裹

为什么组件中的data属性必须定义为一个方法并返回一个对象

数据隔离

父子组件传参

//组件的引入
import headerView from "@/components/headerView.vue";
import swiperView from "@/components/swiperView.vue";

  components:{
        headerView,
        swiperView
    },

父传子

在父组件的子标签中自定义一个属性，在子组件中用props接收，设置默认值。

//父组件
 data(){
        return{
            father1:123
        }
    },

<!--    父传子-->
 <!--        1、在父组件子标签中自定义一个属性-->
    <headerView :ftos="father1"></headerView>



//子组件
 // 2、在子组件中 props属性中 拿到自定义的属性
 props: {
        ftos: [Number],
         // 定义多种类型
        // type: [String, Number],
       // 默认值
        type1: {
            type: [String],
            default: '9999'
            }
          //   type: {
        //type: [String, Number, Object],
        //default: () => {
        //  return {
        //    name: '123'
        //}
        //  }
        //  }
            

    },
    created() {
     // 不能修改父组件传过来的数据
        console.log(this.ftos)
        console.log(this.type1)
    }

子传父

在父组件的子标签中自定义一个事件，方法里面有一个参数用来接收子组件的传值，在子组件中this.$emit（‘自定义事件的名字’，传递的数据 )

//父组件
 methods:{
   //     data 接收来自子组件的传值
        toFa(data){
            console.log(data)
        }
    }
<!--    子传父-->
    <swiperView @toFather="toFa"></swiperView>


//子组件
  data(){
        return{
            msg:45
        }

    },
    created() {
     // 传递参数 第一个参数 自定义事件的名字  第二个参数  传递的数据
        this.$emit('toFather',this.msg)
    }