Vue之父组件与子组件

最新推荐文章于 2023-12-01 20:32:51 发布
最新推荐文章于 2023-12-01 20:32:51 发布
阅读量119 收藏
点赞数
分类专栏： 前端 文章标签： Vue.js 组件化 父子组件 template extend
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_46054543/article/details/113763207
版权

在这里插入图片描述

核心代码如下：

<body>
<div id="app">
    <cpn2></cpn2>
</div>
<script src="../Vue_js/vue.js"></script>
<script>
    //创建子组件
    const cpnC1 = Vue.extend({
        template: '' +
            '<div>' +
            '<h2>我是子组件</h2>' +
            '<p>我是内容:hahahahaha</p>' +
            '</div>'
    })
    //创建父组件
    const cpnC2 = Vue.extend({
        template: '' +
            '<div>' +
            '<h2>我是父组件</h2>' +
            '<p>我是内容:哈哈哈哈</p>' +
            '<cpn1></cpn1>' +
            '</div>',
        components: {
          cpn1: cpnC1
        },
    })
    const app = new Vue ({
        el: '#app',
        data: {
            message: 'vue模板',
        },
        components: {
          cpn2: cpnC2
        },
        methods: {

        },
    })
</script>
</body>
产品迪
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue（13）子组件与父组件超详细解析
weixin_43880991的博客
07-06 6488
父组件和子组件 我们经常分不清什么是父组件，什么是子组件。现在来简单总结下：我们将某段代码封装成一个组件，而这个组件又在另一个组件中引入，而引入该封装的组件的文件叫做父组件，被引入的组件叫做子组件。具体代码如下 <div id="app"> <component2></component2> </div> <script> //...
Vue2.0父组件与子组件之间的事件发射与接收实例代码
08-29
Vue2.0父组件与子组件之间的事件发射与接收实例代码 Vue2.0是前端开发中非常流行的框架之一，它提供了强大的组件化机制，使得开发者可以轻松地构建复杂的Web应用程序。然而，在开发过程中，组件之间的通信是非常...
vue 父组件与子组件
wangatong的博客
12-23 795
1.子组件调用父组件方法和变量 this.$parent.name this.$parent.getName() this.$emit('closeMain',flag); 2.父组件调用子组件方法和变量 this.$refs.mychild.parentHandleclick("嘿嘿嘿"); this.$children[0].parentHandleclick("嘿嘿嘿"); 父组件传值给子组件 父组件调用 <child :inputName="name"> 子组件调用
vue中父组件与子组件
weixin_46003450的博客
09-28 1148
父组件与子组件之间的关系： ●调用方是父组件，被调用方是子组件 ●父组件向子组件传值用prop ●子组件向父组件传值用emit（′父组件中的事件′，传递的参数）●父组件触发子组件的函数，直接this.emit（'父组件中的事件'，传递的参数） ●父组件触发子组件的函数，直接this.emit（′父组件中的事件′，传递的参数）●父组件触发子组件的函数，直接this.refs.refs名.函数（） ...
Vue 父组件和子组件
Mark
07-11 874
目录 1、父组件和子组件 2、父子组件通信 — 父传子props 3、父子组件通信 — 子传父（自定义事件） 4、为什么组件 data 必须是函数 1、父组件和子组件 组件树可以显示出组件和组件之间存在的层级关系，而其中一种非常重要的关系就是父子组件的关系，下面看一下代码是如何形成这种层级关系的： <div id="app"> <cpn2></...
Vue中父组件和子组件的关系
python全栈
09-27 931
props：父组件在使用时给子组件中的属性传递的值；props:[‘cls’,‘stu1’]：表示父组件中定义的值传给子组件中的cls和stu1methods:{//触发组件的delete事件。
vue父组件触发事件改变子组件的值的方法实例详解
10-17
在组件系统中，有时需要实现父组件与子组件之间的通信，以便协调整个应用的状态。本篇文章将详细讲解如何在Vue中实现父组件触发事件来改变子组件的值。 首先，我们要理解Vue中的父子组件通信机制。Vue提供了多种...
vue 父组件给子组件传值子组件给父组件传值的实例代码
10-17
本篇将详细讲解Vue中的父子组件传值机制，包括父组件如何向子组件传递数据以及子组件如何向父组件反馈信息。 1. **父组件给子组件传值** 在Vue中，父组件向子组件传递数据主要是通过`props`属性实现的。首先，在...
vue-prop父组件向子组件进行传值的方法
08-27
Vue的`props`机制允许父组件定义一些属性，然后在子组件的模板中使用这些属性。这使得父组件的状态可以影响到子组件的行为和显示。下面详细介绍一下如何使用`props`进行父组件到子组件的传值。 1. **定义props** ...
Vue 父组件与子组件之间的通信
徐同保的专栏
09-23 788
Vue中父组件与子组件之间的通信。
Vue中父组件向子组件传递数据和方法
Funny_Ma的博客
08-26 1070
Vue中父组件向子组件传值 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-e...
Vue父组件和子组件
XUYIGE的博客
09-09 125
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <div id="app"> <cpn2></cpn2> <!-- <cpn1></cpn1> --> </div&
vue 父组件 和子组件
桃子的博客
10-04 245
vue 父组件 和子组件 复习记录 组建的创建的使用 子组件 就是 在注册的组件里 在注册一个组件 运行结果 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-U
vue的父组件与子组件
Paranoid_truggle的博客
08-11 166
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="app"> <!-- <cpn1></cpn1>--> <cpn2></cpn2> </
Vue父组件与子组件
qq_39105074的博客
03-31 130
1.父组件调用子组件方法直接this.refs.refname.methodName()2.父组件改变子组件属性值：this.refs.refname.methodName() 2.父组件改变子组件属性值：this.refs.refname.methodName()2.父组件改变子组件属性值：this.refs.refname.value=value/ this.$refs.refname.obj...
24. Vue 的 父组件和子组件
Bi-Hu的博客
07-14 106
父组件和子组件 在前面我们看到了组件树： 1.组件和组件之间存在层级关系 2.而其中一种非常重要的关系就是父子组件的关系 直接上代码 然后分析： <div id="app"> <p-a></p-a> </div> <script src="js/vue.js"></script> <script> //...
Vue中的父组件和子组件，以及两者通信
weixin_42738354的博客
10-17 206
通常情况下，组件只分为全局组件和局部组件两种，但事实上，经常可以看到在一个组件构造器中注册了另外一个组件。 <script> const cpn-c1 = Vue.extend({ // 子组件 template: ` <div> <h1>我是标题1</h1> <p>我是内容，哈哈哈</p> </div> ` }) const cpn-c2 = Vue.extend({ // 父组件 template: `
深入理解VUE组件：父子组件详细说明及应用
Kuangtian的博客
12-01 2731
在 Vue 中，组件是可以重复使用的 Vue 实例，拥有一个名为 options 的对象，用于定义组件的属性、方法、生命周期等。而父子组件，则是一种层级关系，其中一个组件（父组件）内部使用了另一个组件（子组件）。
vue2 父组件调用子组件方法
最新发布
07-25
Vue.js 是一种用于构建用户界面的渐进式前端框架，其中 Vue 组件是核心概念之一。Vue 中的组件可以理解为自包含、可复用的 UI 单元，每个组件都可以有自己的状态、模板以及功能。 当您需要从父组件调用子组件的方法时，有几种可行的方式： ### 1. 直接访问属性 如果您的子组件暴露了一个方法作为全局属性（例如 `data` 或 `methods` 部分），您可以直接通过 `this.$parent` 访问到父组件实例，并调用其方法。 ```javascript <!-- 子组件中 --> <template> <button @click="callParentMethod">Call Parent Method</button> </template> <script> export default { methods: { callParentMethod() { this.$parent.someFunction(); } } } </script> ``` ```javascript // 父组件中 import ChildComponent from './ChildComponent.vue'; export default { components: { ChildComponent }, methods: { someFunction() { console.log('Called by parent'); } } }; ``` ### 2. 使用事件通信 更推荐的做法是使用事件系统。您可以将方法绑定到子组件上，然后通过事件传递给父组件。 ```javascript <!-- 子组件中 --> <template> <button @click="onClick">Call Parent Method</button> </template> <script> export default { methods: { onClick(event) { // 触发事件向父组件传递数据或请求调用方法 this.$emit('call-parent-method', '传入的数据'); } } } </script> ``` ```javascript // 父组件中 import ChildComponent from './ChildComponent.vue'; export default { components: { ChildComponent }, data() { return { passedData: '' }; }, methods: { onParentMethodCalled(data) { console.log(`Received Data: ${data}`); } }, created() { // 如果你想让子组件默认触发这个事件，你可以这么做 this.$refs.childComponent.onClick(); // 这里的 childComponent 应该是一个 ref 变量引用子组件 } }; ``` ### 3. 使用 Vuex 状态管理 对于复杂的应用，尤其是大型项目，建议使用像 Vuex 这样的状态管理模式。它允许你在整个应用中共享和管理状态，包括调用跨组件的方法。 ```javascript // 在 Vuex store 中添加一个动作和对应的状态 store.js: ```javascript const state = () => ({ dataToPass: '' }); const mutations = { setDataToPass(state, payload) { state.dataToPass = payload; } }; const actions = { sendData({ commit }) { commit('setDataToPass', '数据'); } }; export default new Vuex.Store({ state, mutations, actions }); ``` ```vue // 父组件中调用动作 <template> <!-- ... --> </template> <script> import { mapActions } from 'vuex'; export default { methods: { ...mapActions(['sendData']), sendDataFromParent() { this.sendData(); } } } </script> ``` 这三种方式分别针对了简单的案例、常用的事件驱动场景以及复杂应用中的状态管理和组件交互需求。选择哪种方式取决于具体的项目需求和团队的编码规范。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值