一.父组件向子组件传值方式
1.1父组件向子组件传数据方式
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <meta http-equiv="X-UA-Compatible" content="ie=edge">
7 <title>Document</title>
8 <script src="vue.js"></script>
9 </head>
10 <body>
11 <div id="app">
12 <com1></com1>
13 </div>
14 <script>
15
16 var vm=new Vue({
17 el:‘#app‘,
18 data:{
19 msg:‘123==啊父组件中的数据‘
20 },
21 methods: {
22
23 },
24 // 定义一个私有子的组件
25 components: {
26 // 来看下子组件能拿到vm父组件中的data里面的msg数据吗
27 // 结论：经过演示,发现,子组件中，默认无法访问到父组件的data上的数据和methods中的方法
28 // 那么子组件怎么获取到父组件的数据
29 com1:{ //这里会报错：子组件直接引用父组件的msg数据
30 template:‘<h1>这是子组件--{{msg}}</h1>‘
31 }
32 }
33 })
34 </script>
35 </body>
36 </html>
// 那么子组件怎么获取到父组件的数据： 父组件，可以在引用子组件的时候，通过熟悉绑定（v-bind）的形式，把需要传递给子组件的数据，以属性绑定的形式，子组件通过props定义父组件传过来的数据才能使用
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <meta http-equiv="X-UA-Compatible" content="ie=edge">
7 <title>Document</title>
8 <script src="vue.js"></script>
9 </head>
10 <body>
11 <div id="app">
12 <!-- 父组件，可以在引用子组件的时候，通过熟悉绑定（v-bind）的形式，把需要传递给子组件的数据，以属性绑定的形式， -->
13 <!-- 传递到子组件内部，供子组件使用 -->
14 <com1 v-bind:parentmsg="msg"></com1>
15 </div>
16 <script>
17
18 var vm=new Vue({
19 el:‘#app‘,
20 data:{
21 msg:‘123==啊父组件中的数据‘
22 },
23 methods: {
24
25 },
26 // 定义一个私有子的组件
27 components: {
28 // 来看下子组件能拿到vm父组件中的data里面的msg数据吗
29 // 结论：经过演示,发现,子组件中，默认无法访问到父组件的data上的数据和methods中的方法
30 // 那么子组件怎么获取到父组件的数据
31 com1:{
32 data(){
33 // 注意：子组件中的data数据，并不是父组件传递过来的，而是子组件自身私有的，比如：子组件子组件通过ajax，
34 // 请求回来的数据，都可以放在data身上
35 return{
36 title:‘123‘,
37 content:‘qqq‘
38 }
39 },
40 template:‘<h1>这是子组件--{{parentmsg}}</h1>‘,
41 // 注意：组件中的所有props中的数据,都是通过父组件传递给子组件的
42 // 注意子组件中的data和props数据的区别：props只读，无法重新赋值，data数据都是可读可写
43 // props是一个数组，把父组件传递过来的parentmsg属性，先在props数组中定义一下，这样才能使用这个数据
44 props: [‘parentmsg‘]
45
46 }
47 }
48 })
49 </script>
50 </body>
51 </html>
1.2父组件向子组件传递方法，使用的是事件绑定机制，子组件通过$emit（）方法拿到父组件传过来的数据
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <meta http-equiv="X-UA-Compatible" content="ie=edge">
7 <title>Document</title>
8 <script src="vue.js"></script>
9 </head>
10 <body>
11 <div id="app">
12 <!-- 如果是事件的话就用事件绑定机制 -->
13 <!-- 父组件向子组件传递方法，使用的是事件绑定机制 v-on，当我们自定义一个事件属性之后， -->
14 <!-- 那么子组件就能够，通过某些方式，来调用传递这个方法了 -->
15 <com2 v-on:func="show"></com2>
16 </div>
17 <template id="tmp1">
18 <div>
19 <h1>这是子组件</h1>
20 <input type="button" value="这是子组件中的按钮，-点击它，触发父组件传递过来的func方法" @click="myclick">
21 </div>
22 </template>
23 <script>
24 // 定义一个字面量类型的组件模板对象
25 var com2={
26 // 通过指定一个ID，表示说，要去加载这个指定ID的template元素中的内容，当作组件的HTML结构
27 template:‘#tmp1‘,
28 methods:{
29 myclick(){
30 // 当点击子组件按钮的时候，如何拿到父组件传递过来的func方法，并调用这个方法
31 // emit触发
32 this.$emit(‘funcs‘)
33 }
34 }
35 }
36 var vm=new Vue({
37 el:‘#app‘,
38 data:{
39 show(){
40 console.log(‘调用了父组件上的show方法‘)
41 }
42 },
43 methods: {
44
45 },
46 components: {
47 com2
48 // 类似于 com2:com2
49
50 }
51 })
52 </script>
53 </body>
54 </html>
原文地址：https://www.cnblogs.com/wanqingcui/p/10757344.html
时间： 2024-08-04 07:53:58