零基础学vue-组件传值

作者: 望月成三人 | 来源:发表于2020-10-31 10:38 被阅读0次

零基础学vue-组件传值
Vue父子组件通信和双向绑定
vue-组件传值
前端基础搬运工-VUE模块
Vue父传子、子传夫通信--小案例
【Vue】组件 - 验证props
Vue组件（二）组件传值
Vue-基础-04-重点
零基础学vue-动态组件
Vue - 传值

<html>
    <head>
        <meta charset="utf-8">
        <title>组件传值</title>
        <script type="application/x-javascript" src="js/vue.js"></script>
    </head>
    <body>
        <div id="app">
            <ul>
                <!--从父组件传值到子组件product-com,props取product绑定来自父组件item的值 -->
                <!--@toparent触发在子组件自定义的事件，把值传给父元素是通过changeEvent -->
                <product-com v-for="item,index in proList" :product="item" @toparent="changeEvent(item.title)"></product-com>
            </ul>
            <p>选择的商品为：{{choose}}</p>
        </div>
        <script type="application/javascript">
            <!--产品组件 -->
            Vue.component("product-com", {
                props: ["product"],
                template: `
                <li>
                    <h3>产品名称{{product.title}}</h3>
                    <h4>产品价格{{product.price}}</h4>
                    <h5>产品描述{{product.desc}}</h5>
                    <button @click="chooseEvent(product.title)">选择商品</button>
                </li>
                `,
                methods: {
                    chooseEvent: function(title) {
                        console.log(title)
                        <!--通过$emit把子元素的值传给父元素，自定义触发toparent这个事件 -->
                        this.$emit("toparent", title)
                    }
                }

            })

            let app = new Vue({
                el: "#app",
                data: {
                    proList: [{
                            "title": "产品1",
                            "price": 10,
                            "desc": "描述1"
                        },
                        {
                            "title": "产品2",
                            "price": 20,
                            "desc": "描述2"
                        },
                        {
                            "title": "产品2",
                            "price": 30,
                            "desc": "描述3"
                        }
                    ],
                    choose: "",

                },
                methods: {
                    changeEvent: function(title) {
                        console.log("title")
                        this.choose = title
                    }
                },
                mounted(){
                    <!--此生命周期,表示已经完成dom和css的加载 -->
                    console.log(this)
                    <!--这里可以用打印出来$children属性,可以直接控制子组件的内容 -->
                }
            })
            })
        </script>
    </body>
</html>

其他的方式

子组件直接调用父元素的方法，不用自定义事件
<button @click="$parent.changeEvent(product.title)">选择商品</button>
子组件直接调用父元素中的变量进行操作
<button @click="$parent.choose=product.title">选择商品</button>
也可以使用$root
- $root使用场景：当子组件层数太多，只用$root回到根节点
  <button @click="$root.changeEvent(product.title)">选择商品</button>