Vue组件传值refs插槽

Posted 2020-12-02 zhd09

一、组件传值

1.父组件向子组件传值

因为子组件本身不能拿到父组件的data数据来用，所以在子组件里用props接收，props是一个数组

父组件向子组件传值
<div id="app">
    <com1 :parent="msg" :parentarr="arr"></com1>
</div>
<template id="com">
    <div>
        {{parent}}
        <ul>
            <li v-for="i in parentarr">{{i}}</li>
        </ul>
    </div>
</template>
<script src="lib/vue-2.4.0.js"></script>
<script type="text/javascript">            
var vm=new Vue({
    el:"#app",
    data:{
        msg:"父组件的msg",
        arr:[1,2,3],
    },
    components:{
        com1:{
            template:"#com",
            props:["parent",‘parentarr‘],//父组件向子组件传值，用props    
        }
    }
})
</script>

2.子组件向父组件传值

子组件不能直接使用父组件的data和methods，子组件向父组件传值用 @和$emit实现(通过函数的形式传出，在父组件接收)

做法：

在父组件里定义一个@xxx="xxx2"的方法,父组件把方法传递给子组件,this.$emit()的第一个参数和xxx的名称一样，父元素的方法xxx2传一个实参进去就相当于是当前传回来的值

this.$emit("fun1",this.xxx) 方法名字/要传出的值

子组件向父组件传值
<div id="app1">
    <com-name @fun1="getData"></com-name>
</div>

<template id="com2">
    <div>
        <button @click="getsonData">调用父组件的getdata</button>
    </div>
</template>
<script src="lib/vue-2.4.0.js"></script>
<script type="text/javascript">
var vm=new Vue({
    el:"#app1",
    data:{
        fromson:""
    },
    methods:{
        getData(x){//传实参
            console.log("父元素的方法getdata拿到子组件里的数据是==="+x)
            this.fromson=x;
        }
    },
    components:{
        comName:{
            template:"#com2",
            data(){
                return {
                    sonmsg:"子组件里的msg"
                }
            },
            methods:{
                getsonData(){
                    this.$emit("fun1",this.sonmsg)//$emit调用fun1
                }
            }
        },
        
    }
})
</script>

二、refs获取dom节点

Vue不提倡用原生的dom操作获取节点，它封装了自己的方法来实现获取dom

做法：

给要获取的dom一个ref属性，起一个名字，通过this.$refs来得到组件里所有有ref属性的dom节点，返回的是一个json

<div id="app">
   <p ref="p1">父组件里的p</p>
   <button @click="getCon">获取内容</button>
   <com ref="login"></com>
</div>
<template id="login">
    <div>
        <p>{{sonmsg}}</p>
    </div>
</template>
<script src="lib/vue.js"></script>
<script>
    Vue.component("com",{
        template:"#login",
        data(){
            return {
                sonmsg:"子组件的msg"
            }
        },
    })
    var vm=new Vue({
        el:"#app",
        methods:{
            getCon(){
                console.log(this.$refs.login.sonmsg)//子组件的msg
                console.log(this.$refs.p1.innerhtml)//父组件里的p
            }
        }
    })
</script>

那么，子组件向父组件传值就有俩种方法

①用@和$emit

②组件也可以有ref属性，可以通过组件的ref属性拿到子组件的data和method

三、插槽 （slot）

插槽是将父组件中的子组件模板数据正常显示出来

假设组件的名称为child

1.插槽的概念

child组件开标签和闭标签之间的内容正常不会显示在页面中，如果想要让他显示，用slot标签代表这些内容，想要让她在哪儿显示就放在模板的哪个位置

理解插槽：

组件就相当于是封装的html 那么插槽就相当于是封装函数里的参数，是每次调用时候都可以赋不同的值的东西

2.具名插槽(传递name属性)

给放在child开标签和闭标签之间的模板或者组件加上v-slot：自定义名字  的指令，在用的时候使用slot标签，在子组件中的 <slot><slot> 里面添加 name=‘自定义名字‘ ，通过name属性选择调用哪个插槽。如果父组件中有一部分没有添加 slot 属性，则此处就是默认的插槽，在子组件中的slot直接就是使用的父组件的默认插槽部分

3.后备内容

在<slot></slot>标签中的内容将在没有匹配到插槽内容时渲染

4.作用域插槽

插槽虽然是属于这个组件的，但是因为他没有放在组件的模板里，所以不能直接使用组件的data数据，如果要想使用组件的data 应该用属性传值的方法把数据传过去 在插槽里通过v-slot:xx="" 等号后面的值接收数据，接收到的数据是一个json 因为有可能传过来不只一个值

v-slot:xx="yy"  xx代表插槽的名字 yy代表接收到组件的data数据

<div id="app">
    <child>
        <template   v-slot:head="datas">
            <div>
                <h5>组件child里的头部模板=={{datas.textcon}}</h5>
            </div>
        </template>
        
        <template v-slot:foot>    
            <div>
                <h5>组件child里的尾部模板</h5>
            </div>
        </template>

        <template>
            <div>我是一个没有名字的插槽</div>
        </template>
    </child>

    <child>
        <template v-slot:head>
            <div>
                <h4>第二次调用组件child的头部模板</h4>
            </div>
        </template>
        <template v-slot:foot>
            <div>
                <h4>第二次调用组件child的的尾部模板</h4>
            </div>
        </template>
    </child>

</div>
<template id="login">
    <div>
        <header>
            <slot name="head" :textcon="text" ></slot>
        </header>
        <p>{{text}}</p>
        <slot>AA</slot>
        <!-- 后备内容放在slot标签里，如果插槽没有传过来内容的话 默认显示AA，如果传过来内容就取代AA -->
        <footer>
            <slot name="foot"></slot>
        </footer>
    </div>
</template>
<script src="lib/vue.js"></script>
<script>
    Vue.component("child", {
        template: "#login",
        data() {
            return {
                text: "子组件的内容",
            }
        },
    })

    var vm = new Vue({
        el: "#app",
    })
</script>