第二十二篇 Vue中父传子 - props

         上一篇内容讲了这个Vue组件的引入使用，知道组件有这个复用性，那么现在要进一步来了解组件中的一些个运用，如在页面中导航显示对应的名称，这个时候就需要进行一个组件的传值，来一个简单的图解：

<div id="app">
    <navbar></navbar>
</div>
<script>
    Vue.component("navbar",{
        template:`
        <div>
            <button>返回</button>
            <span> 导航 <span>  
            <button>首页</button>  
        </div>    
        `
    })

    new Vue({el:'#app'})
</script>

props 

        把组件变成复用组件后期望的效果才是用这个组件的目的，能够达成想要的效果，那么这里需要在父组件将对应的mytitle传过去；下面来简单的完成这个父传子：

<div id="app">
    <navbar mytitle="第一章"></navbar>
</div>
<script>
    Vue.component("navbar",{
        props:['mytitle'],
        template:`
        <div>
            <button>返回</button>
            <span> {{mytitle}} <span>  
            <button>首页</button>  
        </div>    
        `
    })
    
    new Vue({el:'#app'})
</script>

         通过以上的代码可以看到mytitle是在父组件中去定义的，通过props来接收父组件传过来的mytitle数据，同时mytitle中的数据可以与data绑定(v-bind)，当data中的数据发送改变时，组件中的mytitle值也会随之改变。

<div id="app">
    <!-- <navbar v-bind:mytitle="title"></navbar> 简写,前面v-bind讲过-->
    <navbar :mytitle="title"></navbar> 
</div>
<script>
    Vue.component("navbar",{
        props:['mytitle'],  // 父组件传来的属性,在这里进行接收
        template:`
        <div>
            <button>返回</button>
            <span> {{mytitle}} <span>  
            <button>首页</button>  
        </div>    
        `
    })
    
    new Vue({
        el:'#app',
        data:{
            title:'第一章'
        }
    })
</script>

场景

         这里先按照前面的方法实现该效果；并添加对应的样式；

<div id="app">
    <navbar mytitle="首页"></navbar> 
    <navbar mytitle="服务"></navbar> 
    <navbar mytitle="我的"></navbar> 
</div>
<script>
    Vue.component("navbar",{
        props:['mytitle'],
        template:`
        <div style="width: 150px;height: 30px;background-color: #41B784;margin-top:10px;text-align:center">
            <button style="border: none; background-color:#41B784;color: white;">返回</button> 
            <span style="color:#33495D;"> {{mytitle}} </span>  
            <button style="border: none; background-color:#41B784;color: white;">首页</button>  
        </div>    
        `
    })
    
    new Vue({el:'#app'})
</script>

现在将起改为以下这样：

思路：两侧的按钮显示或者隐藏可以用v-show控制，什么时候显示隐藏则就是要知道当前的导航是不是首页，是首页的话就不去显示，那么通过传值的方式，确定v-show是true还是false，那么按照这个思路进行编写；

        1）传值：isShow；v-bind:myShow(:myShow)

        2）<button v-show="myShow">

<div id="app">
    <navbar mytitle="首页" myshow="false"></navbar> 
    <navbar mytitle="服务" myshow="true"></navbar> 
    <navbar mytitle="我的" myshow="true"></navbar> 
</div>
<script>
    Vue.component("navbar",{
        props:['mytitle','isShow'],
        template:`
        <div style="width: 150px;height: 30px;background-color: #41B784;margin-top:10px;text-align:center">
            <button v-show="myshow" style="border: none; background-color:#41B784;color: white;">返回</button> 
            <span style="color:#33495D;"> {{mytitle}} </span>  
            <button v-show="myshow" style="border: none; background-color:#41B784;color: white;">首页</button>  
        </div>    
        `
    })
    
    new Vue({el:'#app'})
</script>

效果：以下就是能够达成期望的一个效果；

        那么如果我们要将这个组件进行封装，封装其他给其他人去使用(或者几个人一同完成一个小项目)，那么这里就需要写的严谨一些，这里就希望用户传过来的值是正确的，即使传错了能够反馈回去需要的是什么类型等等；那么就可以用props做属性验证：

<script>
    Vue.component("navbar",{
        // props:['mytitle','myshow'],
        props:{
            mytitle:String,
            myshow:Boolean
        },
...

         我们知道传过去的值是 myshow = "false/true"，修改下面这样就能看到效果；

<div id="app">
    <navbar mytitle="首页" :myshow="false"></navbar> 
    <navbar mytitle="服务" :myshow="true"></navbar> 
    <navbar mytitle="我的" :myshow="true"></navbar> 
</div>

           那么看上面这一段代码可以知道需不需要显示都需要将这个myshow值传过去，希望能够有一个常态化，默认是显示还是不显示，那么我们就可以来编写props：

<div id="app">
    <navbar mytitle="首页" :myshow="false"></navbar> 
    <navbar mytitle="服务" ></navbar> 
    <navbar mytitle="我的" ></navbar>
</div>
<script>
    Vue.component("navbar",{
        // props:['mytitle','myshow'],
        props:{
            mytitle:{
                type:String,
                default:'默认'
            },
            myshow:{
                type:Boolean,
                default:true    // 默认显示
            }
        },
...

        测试什么都不传之后默认的组件是什么样的？<navbar></navbar>

        以上就是组件中的一个父组件向子组件传值（父传子），即是属性绑定，通过传递属性，将父组件的状态传递给子组件去使用，通过props接收父组件传来的属性；感谢大家支持！