Vue组件间传值 和 访问

1、根组件向子组件传值 ：使用props属性

<html>
<body>
    <script src="vue.js"></script>

    <template id="myt">
        <div>
            <p>{{name}}</p>
            <p>{{pwd}}</p>
            <p>{{cmsg}}</p>
        </div>
    </template>

    <div id="app">
        <cpn :person="p" :cmsg="msg"></cpn>
    </div>

    <script>
        Vue.component("cpn", {
            template: "#myt",
            props: {
                person: Person,
                cmsg: String
            }
        })
//定义一个Person对象
        function Person(m, p) {
            name = m;
            pwd = p;
        }
        const app = new Vue({
            el: "#app",
            data: {
                msg: "hello",
                p: new Person("张三", 123)
            },
        })
    </script>
</body>
</html>

props可以是数组形式表示 ：props:['prop1','prop2','prop3'] ，也可以对象形式props:{prop1:String,prop2:Array,prop3:Object} 。对象形式更加灵活。

注意：如果子组件属性使用驼峰命名，在组件上写属性时把大写换成小写并在前面加-号。要么全写成小写

2、子组件向父组件传值：使用this.$emit()

<html>
<body>
    <script src="vue.js"></script>

    <template id="myt">
        <div>
          <ul>
              <li v-for="item in clist">
              <button v-on:click="cbtnClick(item)">{{item.name}}</button>
              </li>
          </ul>
        </div>
    </template>

    <div id="app">
        <cpn :clist="list" @clickbutton="childclickbutton"></cpn>

        <h3>选择对象：{{curPerson}}</h3>
    </div>

    <script>
        Vue.component("cpn", {
            template: "#myt",
            props:['clist'],
            methods: {
                cbtnClick(item) {
                    this.$emit("clickbutton",item);
                }
            }
        })
         
        const app = new Vue({
            el: "#app",
            data: {
                curPerson: {},
                list: [
                    {
                        id: 1,
                        name: '张三'
                    },
                    {
                        id: 2,
                        name: '李四'
                    },
                    {
                        id: 3,
                        name: '王五'
                    },
                ],
            },
            methods: {
                childclickbutton(item) {
                    this.curPerson = item;
                }
            }
        })
    </script>
</body>
</html>

 

3、父访问子组件的方法：this.$children  ,this.$refs(常用)

<html>
<body>
    <script src="vue.js"></script>

    <template id="myt">
        <div>
         <h2>{{info}}</h2>
        </div>
    </template>

    <div id="app">
        <cpn ref="child"></cpn>
        <button v-on:click="btnclick">访问</button>
        <h3>{{result}}</h3>
    </div>

    <script>
        Vue.component("cpn", {
            template: '#myt',
            data() {
                return {
                    info:"我是子组件属性"
                }
            },
            methods: {
                getInfo() {
                    return this.info;
                }
            }
        })
         
        const app = new Vue({
            el: "#app",
            data: {
                result: ""
            },
            methods: {
                btnclick() {
                    this.result = this.$refs.child.getInfo();
                }
            }
        })
    </script>
</body>
</html>

4、子访问父组件 ：this.$parents  (父组件)  ,this.$root (根组件)

<html>
<body>
    <script src="vue.js"></script>

    <template id="myt">
        <div>
            <button v-on:click="btnclick">访问父</button>

            <h2>{{msg}}</h2>

        </div>
    </template>

    <div id="app">
        <cpn></cpn>
    </div>

    <script>
        Vue.component("cpn", {
            template: '#myt',
            data() {
                return {
                    msg:""
                }
            },
            methods: {
                btnclick() {
                    this.msg = this.$root.msg;
                }
            }
        })
         
        const app = new Vue({
            el: "#app",
            data: {
                msg: "我是父组件中的值"
            },
        })
    </script>
</body>
</html>

 

posted @ 2021-06-24 16:52  lunawzh  阅读(92)  评论(0)    收藏  举报