vue 在子組件中如何設(shè)置props 傳入的v-model值

如果在變量 var c 的 computed里面改變值
//return this.size.trim().toLowerCase() 也是報(bào)錯(cuò)的教程上的

                // 想在 這里 val 轉(zhuǎn)換大寫
                // val是個(gè)對象

<!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() 也是報(bào)錯(cuò)的 教程上的
                    // 想在 這里 val 轉(zhuǎn)換大寫
                    // val是個(gè)對象 
                    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>

回答

編輯回答

選擇

你想問啥沒太懂，不過你報(bào)錯(cuò)的地方this.size沒定義吧而且computed計(jì)算屬性是基于響應(yīng)式依賴進(jìn)行緩存

2017年5月24日 19:19

編輯回答

逗婦惱

這是我根據(jù)你貼出的代碼修改除的結(jié)果，直接粘貼運(yùn)行便可看到效果，我修改的地方在代碼中有注釋，希望能對你有所幫助！

<!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>
        <!-- 你貼出的代碼這里沒有動(dòng)態(tài)綁定msg 直接是msg=msg 這樣就不能動(dòng)態(tài)綁定了 -->
        <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>

2017年3月6日 08:40