vue 在子组件中如何设置props 传入的v-model值

发布于
2018-01-29

如果在变量 var c 的 computed里面改变值
//return this.size.trim().toLowerCase() 也是报错的教程上的

                // 想在 这里 val 转换大写
                // val是个对象

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="./node_modules/vue/dist/vue.min.js"></script>
    <title>Document</title>
</head>
<body>
    <div id="app">
        {{msg}}
        <input v-model="msg" />
        <top-box v-bind:msg=msg></top-box>
        <info-box :msg=msg></info-box>
        <my-component></my-component>
        <change-component msg=msg></change-component>
    </div>
    <script src="components.js"></script>
    <script>
        console.log(top)
    // window.top in borwer  
    // var top={
    var t={
    "props":["msg"],
    "template":`<div>
        1111<div>{{msg}}</div>
        <div>{{msg}}</div> 
    </div>`
    }
    var c={
        "props":{
            msg:String
        },
        template:`<div>
            <br/><label>组件</label>
            <textarea>{{msg}}</textarea>    
        </div>`,
        computed:{
            msg:{
                get:function(val){
                    //return this.size.trim().toLowerCase() 也是报错的 教程上的
                    // 想在 这里 val 转换大写
                    // val是个对象 
                    return val
                }
            }
        }
    }

    var Child = {
    template: '<div>A custom component!</div>'
    }
    // var app=
    new Vue({
        "el":"#app",
        data(){
            return {"msg":"successs"}
        },
        "components":{
            "top-box":t,
            "my-component":Child,
            "info-box":{
                "props":["msg"],
                "template":`<textarea v-model="msg"></textarea>`
            },
            "change-component":c,
        }

    }) 
    </script>
</body>
</html>

vue.js 前端 javascript

阅读 3.3k

2 个回答

得票最新

luozz

5.8k3629

发布于
2018-01-30

✓ 已被采纳

这是我根据你贴出的代码修改除的结果，直接粘贴运行便可看到效果，我修改的地方在代码中有注释，希望能对你有所帮助！

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="https://cdn.bootcss.com/vue/2.5.13/vue.min.js"></script>
    <title>Document</title>
</head>
<body>
    <div id="app">
        {{msg}}
        <input v-model="msg" />
        <top-box v-bind:msg=msg></top-box>
        <info-box :msg=msg></info-box>
        <my-component></my-component>
        <!-- 你贴出的代码这里没有动态绑定msg 直接是msg=msg 这样就不能动态绑定了 -->
        <change-component :msg=msg></change-component>
    </div>
    <script>
        var t = {
            "props": ["msg"],
            "template": `<div>
        1111<div>{{msg}}</div>
        <div>{{msg}}</div> 
    </div>`
        }
        var c = {
            "props": {
                msg: String
            },
            template: `<div>
            <br/><label>组件</label>
            <textarea>{{msg}}</textarea>    
        </div>`,
            computed: {
                msg: {
                    get: function() {
                        //可以通过如此方式获取
                        return this.$props.msg.toUpperCase();
                    }
                }
            }
        }

        var Child = {
                template: '<div>A custom component!</div>'
            }
            // var app=
        new Vue({
            "el": "#app",
            data() {
                return {
                    "msg": "successs"
                }
            },
            "components": {
                "top-box": t,
                "my-component": Child,
                "info-box": {
                    "props": ["msg"],
                    "template": `<textarea v-model="msg"></textarea>`
                },
                "change-component": c,
            }

        })
    </script>
</body>
</html>

ajson

2217

发布于
2018-01-30

你想问啥没太懂，不过你报错的地方this.size没定义吧而且computed计算属性是基于响应式依赖进行缓存

撰写回答