vm.$props

最新推荐文章于 2024-06-07 15:25:25 发布

tangtian_yes

最新推荐文章于 2024-06-07 15:25:25 发布

阅读量1.3k

点赞数

分类专栏： vue.js

本文链接：https://blog.youkuaiyun.com/m0_56315262/article/details/115282600

版权

vue.js 专栏收录该内容

35 篇文章

订阅专栏

props—父类向子类传递信息，子类接受并返回结果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="vue.js"></script>

</head>
<body>
    <div id="app">
        <my-parent></my-parent>
    </div>

  <template id="parent">
        <div>
            <h3>手机信息搜索</h3>
            手机品牌：<input type="text" v-model='brand'>
            <my-child v-bind:name='brand'></my-child>
        </div>
    </template>

 <template id="child">
        <ul>
            <li>手机品牌：{{show.brand}}</li>
            <li>手机型号：{{show.type}}</li>
            <li>市场价格：{{show.price}}</li>
        </ul>
    </template>

 <script>
        Vue.component('my-parent',{
            data () {
                return {
                brand: ''
            }
        },
            template:"#parent"
        })

Vue.component('my-child',{
        template:"#child",
        data(){
            return{
                content:[
                    {brand: '华为', type: 'Mate20', price: 3699},
                    {brand: '苹果', type: 'iPhone7', price: 2949},
                    {brand: '三星', type: 'Galaxy S8+', price: 3299},
                    {brand: 'vivo', type: 'Z5x', price: 1698},
                    {brand: '一加', type: 'OnePlus7', price: 2999},
                    {brand: '360', type: 'N7 Pro', price: 1099},
                    {brand: 'oppo', type: 'Reno', price: 2599}
                ],
                show:{brand:'',type:'',price:''}
            }
        },
        props:['name'],
        watch:{
            name(){
                if(this.$props.name){
                    var found = false;
                    this.content.forEach((value,index)=>{
                        if(value.brand===this.$props.name){
                            found = value;
                        }
                    }),
                    this.show=found?found:{brand:'',type:'',price:''}
                }
            }
        }
    })

     var vm = new Vue({
            el:'#app',
            data:{
                
            }
        })
    </script>
</body>
</html>

在这里插入图片描述

vm.$props

（现在还是有点似懂非懂，欢迎大佬详细解惑—数据属性传递）