VUE组件

组件化开发

prop向子组件传递数据

<template>
    <!-- 绑定变量传值 -->
    <Content :title="title" :msg="msg" :arr="arr" :ob="ob" />
</template>
<script>
import OneCom from "./components/OneCom.vue";
export default {
    data() {
        return {
            title: "标题",
            msg: "消息",
            arr : [
                '苹果',
                '香蕉',
                '梨子'
            ],
            ob: {
                name: "小明",
                age: "18岁"
            }
        };
    },
    components:{
        Content
    }
};
</script>
<!--子组件-->
<template>
    <div>
        <div>{{ title }}</div>
        <div>{{ msg }}</div>
        <div>{{ arr }}</div>
        <div>{{ ob }}</div>
    </div>
</template>
<script>
export default {
    data() {
        return {
        };
    },
    // 1、props 参数，获取父文件的传值
    props: ["title", "msg", "arr", "ob"]
};
</script>

接收值并限制类型

有两种接收值的方法

第一种 数组字符串方法

props['接收值1','接收值2'...]

第二种 对象限制接收参数的类型

数组和对象要用方法返回

type: 类型 String ,Number, Object, Arr…
default: 不传值，给一个默认值
required: true，必须传的值，

子组件向父组件传值，事件传值

//App.vue文件
<template>
    <!-- 在父元素中使用子元素自定的事件名 -->
    <Content @click="EditChange()" />
</template>
<script>
    import Content from "./components/aj.vue"; //子元素
    export default{
        data(){
            return{
                value: '父组件值'//默认值
            }
        },
        methods: {
            //操作方法
            EditChange(){
              this.value = "改变的值"
            }
        },
        components: {
            //组件
            Content,
          }
    }
</script>
//aj.vue文件
<template>
    <div>
        <button @click="edit()">点击改变父组件的值</button>
    </div>
</template>
<script>
    export default{
        data(){
            return{
            }
        },
        methods:{
            edit(value){
                //使用 $emit方法 $emit('自定义事件名',要传的值)
                this.$emit('EditChange',value)
            }
        }
    }
</script>

父子组件访问方式

父组件访问子组件 $refs

<!--父页面-->
<hi :name="name" :age="age" :sex="sex" ref="hi"/>
export default{
    mounted(){
        // console.log(this.$refs.hi)
    },
}

子组件获取父组件的值 $parent 重叠性很强不适合使用

子组件获取根组件的值 $root

<!--父页面-->
<hi :name="name" :age="age" :sex="sex" ref="hi"/>
<!--子页面-->
export default{
    mounted(){
    // 子组件获取父组件的值 $parent 重叠性很强不适合使用
    // console.log(this.$parent)
    // 子组件获取根组件的值 $root
    // console.log(this.$root)
    }
}

slot插槽

使用 slot 标签，做为占位：也叫插槽

//OneCom.vue子文件
<template>
    <div>
        <slot></slot>
    </div>
</template>
//App.vue 文件
<template>
    <div>
        // 使用子组件，传button标签
        <one-com>
            <button>按钮</button>
        </one-com>
    </div>
</template>
<script>
import OneCom from "./components/OneCom";
export default {
    data() {
        return {};
    },
    components: {
        OneCom
    }
};
</script>

slot插槽命名

如果多个插槽，传2次按钮，会出现4个按钮，所以要用命名的方法

//OneCom.vue 子文件
<template>
    <div>
        <div class="flex">
            <slot name="top"></slot>
            <slot></slot>
        </div>
    </div>
</template>
//App.vue 
<template>
    <div>
        <one-com>
            // 使用 template 标签，v-slot参数，找到对应的插槽name名字
            <template v-slot:top>
                <button>按钮</button>
            </template>
            <button>按钮</button>
        </one-com>
        <one-com>
            <a>a链接</a>
            // 也可以#简写，是v-slot的语法糖
            <template #top>
                <a>a链接</a>
            </template>
        </one-com>
        <one-com>
            // 查找默认插槽
            <template v-slot:default>
                <a>a标签</a>
            </template>
        </one-com>
    </div>
</template>
<script>
import OneCom from "./components/OneCom";
export default {
    components: {
        OneCom,
    }
};
</script>

父级使用插槽，使用子组件数据

//子元素
<template>
    <div>
        <div class="flex">
            <slot :list="list"></slot>
        </div>
    </div>
</template>
<script>
    export default {
        data(){
        return{
            list:[1,2,3,4,5]
            }
        }
    }
</script>
//App.vue
<template>
  <div>
      <OneCom>
    <!-- 作用域插槽此处的data命名可以任意 default代表着子组件的slot默认name值-->
        <template v-slot:default="data">
        <ul>
            <li v-for="item in data.list" :key="item" @click="lis">
                {{ item }}
            </li>
        </ul>
        </template>
    </OneCom>
  </div>
</template>
<script>
import OneCom from './OneCom.vue'
export default {
data(){
    return{}
},
components:{
    OneCom
}
}
</script>

使用provide 与inject跨通信传值(父组件改变子孙组件)

//OneCom.vue 子元素
<template>
<div>
    <h1>
    {{ newMessage }}
    </h1>
</div>
</template>
<script>
export default {
    inject: ['message'], //接收父组件传递的值
    data(){
        return{}
    },
    computed:{
      newMessage(){
        return this.message()
      }
    },
}
</script>
//App.vue
<template>
<div>
    <HelloWorld></HelloWorld>
    <button @click="msgs">点击</button>
</div>
</template>
<script>
import OneCom from './OneCom.vue'
export default {
    data(){
        return{
        message:"helloWorld"
        }
    },
    provide(){
        return{
            message:()=> this.message //传递到子孙组件动态值
        }
    },
    methods:{
        msgs(){ //点击改变的事件
            this.message = '消息改变了'
        }
    }
}
</script>