<!DOCTYPE html> <html> <head> <meta charset="utf-8"> </head> <body> <div id="app"> <com1 v-bind:parenting="parentDate"></com1> <!-- 这里想用调用父组件中的数据，必须为父组件的数据绑定一个名称，并且该名称在子组件中利用props属性进行定义 --> <com2 @fun="show"></com2> <!-- 这里同理，为父组件的方法绑定一个别称 --> </div> <template id="temp2"> <div @click="myclick"> <h3>这是子组件2</h3> </div> </template> </body> <script src="node_modulesvuedistvue.js"></script> <script> let com2 = { template:'#temp2', methods:{ myclick(){ //此时利用emit方法来触发父组件传过来的方法 this.$emit('fun');//子组件也可以通过这个方法进行传参操作 } } } let vm = new Vue({ el: "#app", data: { parentDate: "我是父组件的数据" //子组件不能直接调用父组件中的数据 }, //定义父组件的方法 methods:{ show(){ alert('成功调用了父组件的方法'); } }, components: { com1: { data() {//子组件内数据都是可读可写的 return { msg: "hello" } }, //从父组件获取的数据为只读，不要去修改，。。即使能修改 template: "<h3>{{msg}}这是子组件-----{{ parenting }}</h3>", //绑定并声明完成后即可调用，注意此时的名称为定义的名称 props: ['parenting'] //绑定数据名称的声明 }, com2:com2 } }); </script> </html>
效果图：
